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

时间:2012-06-16 07:17:33

标签: javascript jquery hide show getelementbyid

我无法在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');
        });
    });
}

3 个答案:

答案 0 :(得分:3)

我认为你应该这样做,因为你的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')无效。

  • 您的$(document).ready()功能中不需要del()。所以你的代码看起来像:

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

答案 1 :(得分:0)

$(function() {

    $('.button').click(function () {
        $(this).parent().parent().fadeOut('slow');
    });

});

您的代码出了问题:

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

答案 2 :(得分:0)

在这一行:

        var tdiv = document.getElementById(obj);

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

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

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

其他一些海报已经指出你不应该把你的del.函数放在你的del函数中,而应该把它放在它之外。我完全不同意。如果您遵循他们的建议,您的代码将会破坏,因为“del”函数将无法在全局命名空间中使用。