0

我在这里有以下问题：在我的 html 结构中，我得到了一些 div，它们最初是隐藏的。我想要做的是：点击段落标签存储它的索引并将相同的索引应用于隐藏的div（女巫也具有与“点击”p标签相同的索引）。
例如：当我单击 SHOW RED DIV 'paragraph' 时，显示隐藏的 div （红色类的 div），其索引与单击的 p 标签相同。我的代码不起作用，因为它显示了所有隐藏的 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>

Vision 的答案提供了使用该函数访问元素的正确方法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 回答