Question

我在这里有一个以下问题：在我的html结构中，我得到了一些div，它们最初是隐藏的。我想要做的是：点击一个段落标记存储它的索引并将相同的索引应用于隐藏的div（也有与“clicked”p标签相同的索引）。
例如：当我点击SHOW RED DIV'段落'时，显示隐藏的div （div with class red），其索引与点击的p tag相同。我的代码不工作，因为它显示所有隐藏的div，因为我不知道如何应用存储的索引:(我希望有人可以帮助我... THX !!

这是{{ 3}}

这是我到目前为止所得到的：

<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>

Answer 1

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

Live DEMO

Answer 2

使用此代码：

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

DEMO： http://jsfiddle.net/Q96Uj/

Answer 3

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

检查 DEMO

Answer 4

哇，这里有些混乱。 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');
  });
});

如何将存储的索引应用于另一个div？

4 个答案: