替换相同的类div并且没有ID

Question

我有四个DIVS，一个准备就绪，另外三个仍然隐藏。当按下第二个div的链接时，我希望显示第二个div，以及下一个链接。

问题是，所有四个DIV 都没有 ID且具有相同的类。

我只是想让它自动运行而不知道div的ID和类，或者div中的任何内容。它可能看起来像幻灯片，但在点击功能。

<p> link to the ready div </P> 
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>


 <div id="wrapper">

<div> this is the div that is ready. This div has no ID and has the same class with others <div>

<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>

<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>

<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>

 </div>

FIDDLE

Answer 1

我做了一个小提琴，可能适合你的情况请看看。您可以根据自己的需要进行一些修改。

var currentDiv = 0;
$(document).ready(function(){
    $(".container div").click(function(){
        $(".container div").eq(currentDiv+1).css( "display", "block" );
        currentDiv++;
    })
});

JSFIddle Link

Answer 2

JS FIDDLE DEMO

<强>解释

<div class="parentDiv">
  <div class="div">1</div>
  <div class="div">2</div>
  <div class="div">3</div>
  <div class="div">4</div>
</div>

<div class="buttons">
   <a idx="1">1</a> 
   <a idx="2">2</a> 
   <a idx="3">3</a> 
   <a idx="4">4</a> 
</div>

$('.buttons a').click(
  function(event)
{
    var idx = $(event.target).attr('idx');
    $('.div').hide(); //Hides all the divs
    $('.parentDiv div:nth-child('+idx+')').show();  // Shows required div
}
);

<强>劣势

如果要插入更多内容，还有更多工作要做。没问题.. 如果插入div，则必须更改所有链接。

 <div class="parentDiv">
  <div class="div">1</div>
    <div class="div">2.0 Inserted Div</div>   
  <div class="div">2</div>
  <div class="div">3</div>
  <div class="div">4</div>
</div>

<div class="buttons">
   <a idx="1">1</a> 
   <a idx="2">2.0</a>
   <a idx="3">2</a>   
   <a idx="4">3</a> 
   <a idx="5">4</a> 
</div>

不在这里，所有的idx都必须改变。由于我的代码使用了nth-child属性

<强>被修改    Updated Fiddle    Another Update

Answer 3

我很确定这就是你要找的东西。

<强>的jQuery

$(".options p").click(function () {
    var ourPick = $("p").index(this) + 1;
    $(".container div:nth-child(" + ourPick + ")").show();
});

Demo Here

所以我们正在做的是按下链接的索引，然后使用它来选择我们想要显示的div（这是使用:nth-child()）。

注意：我在链接周围放置了一个容器，因此您不会在页面上的每个p中选择一个容器。

---

如果您一次只想要一个，则可以在显示之前将它们全部隐藏起来。

<强> jQuery的：

$(".options p").click(function () {
    var ourPick = $("p").index(this) + 1;
    $(".container div").hide();
    $(".container div:nth-child(" + ourPick + ")").show();
});

Demo Here