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

まず、次の行を id ではなく class を使用するように変更します。

<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 に答える