Question

我有这个结构：

<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();
   }
}

但它只适用于第一个元素，我希望它能与所有这些元素一起使用，任何帮助？感谢。

Answer 1

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

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

<强> jsFiddle example

Answer 2

首先，将此行更改为使用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();
}

Answer 3

首先，.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;

从id和class jquery中选择div

3 个答案: