0

ここで次の問題があります: 私の html 構造では、いくつかの div を取得しましたが、それらは最初は非表示になっています。私がやろうとしているのはこれです：段落タグをクリックすると、それがインデックスになり、同じインデックスが非表示のdivに適用されます（ウィッチには「クリックされた」pタグと同じインデックスもあります）。
例: SHOW RED DIV 'paragraph'をクリックすると、クリックされた p タグと同じインデックスを持つ非表示の div (クラス red の div)が表示されます。すべての隠しdivが表示され、保存されたインデックスを適用する方法がわからないため、コードが機能していません:(誰かが私を助けてくれることを願っています... THX !!

ここにフィドル

がありますこれは私がこれまでに得たものです:

<html>
<head>
<style type="text/css">
div{width:100px;height:100px;display:none;}
.red{background-color:red;}
.blue{background-color:blue;}
.green{background-color:green;}
</style>

<script type="text/javascript">
$(document).ready(function(){
   $("p").click(function(){
   var index=$(this).index(this);
   $('div').data('index',index).show('slow');
   });
});
</script>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<span>
<p>SHOW RED DIV</p>
<p>SHOW BLUE DIV</p>
<p>SHOW GREEN DIV</p>
</span>
</body>
</html>
4

4 に答える 4

2 
$(document).ready(function() {
    $("p").click(function() {
        var index = $(this).index();
        $('div').eq(index).show('slow');
    });
});​

ライブデモ

于 2012-05-06T15:53:38.837 に答える
1

次のコードを使用します。

$(document).ready(function() {
    $("p").click(function() {
        var index = $(this).index();
        $('div:eq(' + index + ')').show('slow');
    });
});​

デモ: http://jsfiddle.net/Q96Uj/

于 2012-05-06T15:51:44.273 に答える
1 
$(document).ready(function(){
  $("p").click(function(){
     var index=$(this).index();
      $('div:eq('+ index +')').show('slow');
  });
});

デモをチェック

于 2012-05-06T15:52:48.660 に答える
1

うわー、ここでいくつかの混乱。はindex、兄弟に対する要素のインデックスです。検索しようとしているdataインデックスは、次のように定義して要素にアタッチした任意のインデックスです。

<div class="red" data-index="red"></div>
<p data-index="red">SHOW RED DIV</p>

ビジョンの答えは、関数を使用して要素にアクセスする正しい方法を提供しますindex()が、アプリケーションでは、ユーザー定義のインデックスを使用することを好むように思えます。その場合、JavaScript は次のようになります。

$(document).ready(function(){
  $("p").click(function(){
    var index=$(this).data('index');
    $('div[data-index=' + index + ']').show('slow');
  });
});​
于 2012-05-06T15:54:04.073 に答える