从 id 和类 jquery 中选择 div答案

【问题标题】：select div from id and class jquery从 id 和类 jquery 中选择 div
【发布时间】：2012-08-07 16:15:53
【问题描述】：

我有这个结构：

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

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

【问题讨论】：

您不应该有多个具有相同 ID 的元素...使用类来对具有相似功能/行为的多个元素进行分组。 ID 应该用于唯一标识元素。

标签： jquery class html show

【解决方案1】：

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

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

jsFiddle example

【讨论】：

@EnriqueAlonsoGonzalezMeza - 如果您认为此答案有帮助，请考虑将其选为已接受的答案和/或投票。

【解决方案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();
}

【讨论】：

【解决方案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;

【讨论】：