如何使用 javascript 变量使用 jQuery 隐藏元素

How do I hide an element with jQuery using a javascript variable

本文关键字:jQuery 隐藏 元素 何使用 javascript 变量      更新时间:2023-09-26

>我在 html 代码中隐藏带有以下 id 的页面元素时遇到问题

<table cellspacing=5 cellpadding=3>
  <tr>
    <td id="lst2"><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
    <td><a href="unibay.php" class="button edit">EDIT</a></td>
    <td><a href="#" onclick="del('lst1');" class="button cross">DELETE</a></td>
  </tr>
  <tr id="lst2">
    <td><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
    <td><a href="unibay.php" class="button edit">EDIT</a></td>
    <td><a href="#" value="list2" onclick="del('lst1');" class="button">DELETE</a></td>
  </tr>
</table>

我希望能够使用在javascript函数中调用的jQuery隐藏具有选定id的元素。下面是代码,但它不起作用:

function del(obj) {
    $(document).ready(function(){
        var tdiv = document.getElementById(obj) ;
        var sdiv = "#" + tdiv ;
        $('.button').click(function () {
            $(sdiv).fadeOut('slow');
        });
    });
}

我认为你应该这样做,因为你的obj包含一个字符串,你的目标id,那么遵循方法就足够了。

var sdiv = "#" + obj;
$('.button').click(function () {
   $(sdiv).fadeOut('slow');
});

代码中的问题

  • var tdiv = document.getElementById(obj);行返回一个 DOM 元素。因此,如果您需要在代码中使用它,那么它将如下所示:

    function del() {
       var tdiv = document.getElementById(obj);
       $('.button').click(function() {
         $(tdiv).fadeOut('slow');
       });
    }
    

在这里,$(tdiv) 会将你的 tdiv 元素变成一个 jQuery 对象。但tdiv.fadeOut('slow')行不通。

  • 而且您不需要del()功能中的$(document).ready()。因此,您的代码将如下所示:

    function del(obj) {
        var sdiv = "#" + obj;
        $('.button').click(function () {
          $(sdiv).fadeOut('slow');
        });
     }
    
$(function() {
    $('.button').click(function () {
        $(this).parent().parent().fadeOut('slow');
    });
});

你的代码有问题:

  • document.ready不应该在函数内部。您将函数放在document.ready
  • 您将单击事件绑定在函数中。这不是必需的,因为您可以在 click 事件中使用this来获取单击的元素,然后.parent()两次以获取它所属的tr。(一次给你td,再给你td的父母,也就是tr

在这一行中:

        var tdiv = document.getElementById(obj);

getElementById() 返回 DOM 元素,然后将其分配给 'tdiv'。因此,当您将其连接到"#"字符串时,您实际上是在添加一个字符串 + 一个 DOM 对象(这不起作用)。

有一个简单的解决方法。 由于您已经将元素的 id 存储在变量 'obj' 中,因此您可以连接它:

        var sdiv = "#" + obj;
        $('.button').click(function () {
            $(sdiv).fadeOut('slow');
        });

其他一些海报指出,你不应该把document.ready()放在del函数中,而应该放在函数之外。 我完全不同意。 如果您遵循他们的建议,您的代码将中断,因为"del"函数在全局命名空间中不可用。