0

我有这个结构：

<div id="list_articles">
  <div id="article">
    <label>Select:</label><input type="checkbox" class="checked_art" id="1001" />
    <div id="hide" style="display:none;" class="1001">
      //Code here...
    /div>
  </div>
  <div id="article">
    <label>Select:</label><input type="checkbox" class="checked_art" id="1002" />
    <div id="hide" style="display:none;" class="1002">
      //Code here...
    /div>
  </div>
</div>

我想要做的是，当我选中我的复选框时，根据复选框的 id 获取“隐藏”，例如：如果我选中这个：

<input type="checkbox" class="checked_art" id="1001" />

我想删除的样式

<div id="hide" style="display:none;" class="1001">

我一直在用 Jquery 尝试这种方式：

$(".checked_art").live('click',function()
{
   var id = $(this).attr('id');
   var checked = $(this).attr('checked');
   var a = "#hide ."+id;
   if(checked == 'checked')
   {
    $(a).show();
   }
   else
   {
    $(a).hide();
   }
}

但它只适用于第一个元素，我希望它对所有元素都这样做，有什么帮助吗？谢谢。

4

3 回答 3

1 
$(".checked_art").click(function(){
    $(this).next().toggle();
});

顺便说一句，ID 必须是唯一的。

jsFiddle 示例

于 2012-08-07T16:18:35.573 回答
0

首先，.live()已被弃用。如果您使用的是最新版本的 jQuery，您应该使用.on()：

$(document).on("click", ".checked_art", function() {
     // ...
});

此外，ID 必须是唯一的。因此，您应该更改使“隐藏”标识符成为class属性而不是id属性。

此外，您的id和class属性应该以字母开头，而不是数字。您可以通过为每个以数字开头的属性加上公共字符串（例如“e”）来解决此问题。例如，您可以将“1001”更改为“e1001”。

无论如何，您的问题是 和 之间的id空间class。这个：

var a = "#hide ."+id;

应该是这样的：

var a = ".hide."+id;
于 2012-08-07T16:21:57.067 回答
0

首先，将此行更改为使用 class 而不是 id：

<div style="display:none;" class="1001 hide">

然后，更改您的函数以使用类.hide而不是 id#hide并删除选择器.hide和.1001选择器之间的空格（表示在同一级别上）

$(".checked_art").on('click',function()
{
   var id = $(this).attr('id');
   var checked = $(this).attr('checked');
   var a = ".hide."+id;
   if(checked == 'checked')
   {
    $(a).show();
   }
   else
   {
    $(a).hide();
   }
}

但是，更简单的代码将是（基于您的 HTML）：

$(".checked_art").on('click',function()
{
    if ($(this).is(':checked')) {
        $(this).next('div.hide').hide();
    } else {
        $(this).next('div.hide').show();
    }
}

或者，更简单：

$(".checked_art").on('click',function()
{
    $(this).next('div.hide').toggle();
}
于 2012-08-07T16:21:19.703 回答