1

次の html を取得します。

<div class="box">
<a href="javascript:;" onclick="toggle_content(1)">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>

<div class="box">
<a href="javascript:;" onclick="toggle_content(1)">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>

<script>
function toggle_content(key){
   $('.box_content_'+key,$(this).parent()).toggle();
}
</script>

基本的に、トグルリンクをクリックすると、一致するクラス名を持つ同じ親内の要素をトグルしたいと思います。上記のコードは何もしていないようです。

4

5 に答える 5

2

$(this).parent()あなたがそれが何をしていると思うかについては言及していません。thisこの文脈では何ですか？窓。

以下が機能します。

$('.box_content_'+key,".box").toggle();

ただし、次のようにします。

HTML

<a href="#" class="toggle" data-toggle-id="1">Toggle</a>

jQuery

$(".toggle").click(function() {
  var key = $(this).data("toggle-id");
  console.log(key);
  $('.box_content_'+key, $(this).parent()).toggle();
});

デモ

于 2012-08-13T20:36:18.157 に答える
2

jQuery を使用しているので、jQueryclickとsiblings()メソッドを使用できます。次のことを試してください。

一致した要素のセット内の各要素の兄弟を取得します。オプションでセレクターによってフィルター処理されます。

$('.box a').click(function(){
   $(this).siblings('.box_content_1').toggle()
})

data=*アンカーのターゲット要素を選択するために属性を使用できます。

<div class="box">
   <a href="#" data-toggle="1">Toggle</a>
   <h2>Some Title</h2>
   <div class="box_content box_content_1"></div>
   <div class="box_content box_content_2"></div>
</div>

<div class="box">
   <a href="#" data-toggle="2">Toggle</a>
   <h2>Some Title</h2>
   <div class="box_content box_content_1"></div>
   <div class="box_content box_content_2"></div>
</div>


$('.box a').click(function(e){
    e.preventDefault();
    var which = $(this).data('toggle');
    $(this).siblings('.box_content_'+ which).toggle()
})
于 2012-08-13T20:36:56.080 に答える
0

このjsFiddle の例を試してください。

HTML

<div class="box">
<a href="javascript:;" onclick="toggle_content(1,$(this))">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1">a</div>
<div class="box_content box_content_2">b</div>
</div>
<div class="box">
<a href="javascript:;" onclick="toggle_content(2,$(this))">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1">a</div>
<div class="box_content box_content_2">b</div>
</div>​

jQuery

function toggle_content(key,link){
   link.siblings(".box_content_"+key).toggle();
}​

jsFiddle の例

于 2012-08-13T20:37:47.263 に答える
0

私はあなたへの答えを持っています！

HTML:

<div class="box">
    <a href="javascript:toggle_content(1);">Toggle</a>
    <h2>Some Title</h2>
    <div class="box_content box_content_1">1</div>
    <div class="box_content box_content_2">2</div>
</div>

JS:

function toggle_content(key) {
    $('.box_content_' + key).toggle();

}​

デモ

于 2012-08-13T20:37:57.733 に答える
0

を使用してthisinのコンテキストを設定できますtoggle_contentcall

onclick="toggle_content.call(this, 1)"

http://jsfiddle.net/eyWBq/

于 2012-08-13T20:46:10.503 に答える