javascript - jQuery 从一组(组)类中选择 div

Question

我的目的是从类中选择所有第二个元素。淡入该 div 并淡出该类的所有第一个元素。

如下所示的示例。当用户单击下一步时，从 modalDialog 中选择所有第二组幻灯片框并相应地淡入或淡出它们。我编写的 jQuery 根据 .slide-box 类的总数选择列表。因此只有第二个 .slide-box 淡入或淡出。提前致谢。代码笔:http://codepen.io/rezasan/pen/LROyqX

HTML:

    <a href=""#">NEXT</a>
    <ul class="modalBox">

      <li class="modalDialog">
        <div class="slide-box">
          <img src="http://placehold.it/300x200" />
          <p>IMAGE SET 1</p>
          <div class="slide-box">
            <img src="http://placehold.it/300/300" />
            <p>IMAGE SET 1</p>
          </div>
        </div>
      </li>

     <li class="modalDialog">
        <div class="slide-box">
          <img src="http://placehold.it/300x200" />
          <p>IMAGE SET 2</p>
          <div class="slide-box">
            <img src="http://placehold.it/300/300" />
            <p>IMAGE SET 2</p>
          </div>
        </div>
      </li>

       <li class="modalDialog">
        <div class="slide-box">
          <img src="http://placehold.it/300x200" />
          <p>IMAGE SET 3</p>
          <div class="slide-box">
            <img src="http://placehold.it/300/300" />
            <p>IMAGE SET 3</p>
          </div>
        </div>
      </li>

    </ul>

jQuery:

    var counter = 1;
    //Hide all second element of slide-box
    $(".modalDialog .slide-box:eq("+counter+")").hide();

    //When user click, call rotateImage function
    $('a').click(function(){
      rotateImage();
    });

    //If counter = 1, fade in 2nd image of all sets and fade out 1st image.
    function rotateImage(){
      if(counter === 1){
        $(".modalDialog .slide-box:eq("+counter+")").fadeIn();
      }
    }

CSS:

    *{
      margin:0;
      padding:0;
      text-align:center;
    }

    li{
      margin:20px 0px;
      display:inline-block;
      vertical-align:text-top;
    }

Answer 1

您应该能够使用 nth-child() 或 nth-of-type() jQuery 中的选择器以给定的时间间隔定位特定元素，特别是如果您考虑对 HTML 进行一些修改。

考虑不嵌套元素

由于您希望能够有效地单独定位每个框，因此最好不要嵌套它们。尝试按如下方式更新现有对话框:

<li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 1</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 1</p>
    </div>
</li>

让您的计数器和 jQuery 为您服务

利用之前的更改和 nth-child()选择器，您现在可以通过传递 2n 轻松地在隐藏每个偶数和奇数元素之间切换和2n+1到nth-child()分别选择器。

这将允许您更改代码:

// Initially hide every 2nd element
$(".modalDialog .slide-box:nth-child(2n)").hide();

$('a').click(function(e){
    e.preventDefault();
    // Update your counter and handle rolling over (toggle between 0 and 1)
    counter = ++counter % 2;
    rotateImage();
});

function rotateImage(){
  // Initally hide all of your boxes
  $('.modalDialog .slide-box').hide();
  // Only show even / odd based on the counter
  $(".modalDialog .slide-box:nth-child(2n +"+counter+")").fadeIn();
}

把它们放在一起

var counter = 1;
//Hide all second element of slide-box
$(".modalDialog .slide-box:nth-child(2n)").hide();

//When user click, call rotateImage function
$('a').click(function(e){
  e.preventDefault();
  counter = ++counter % 2;
  rotateImage();
});

//If counter = 1, fade in 2nd image of all sets and fade out 1st image.
function rotateImage(){
  $('.modalDialog .slide-box').hide();
  $(".modalDialog .slide-box:nth-child(2n +"+counter+")").fadeIn();
}

        *{
          margin:0;
          padding:0;
          text-align:center;
        }

        li{
          margin:20px 0px;
          display:inline-block;
          vertical-align:text-top;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href=""#">NEXT</a>
<ul class="modalBox">
  
  <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 1</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 1</p>
    </div>
  </li>
  
 <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 2</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 2</p>
    </div>
  </li>

   <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 3</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 3</p>
    </div>
  </li>

</ul>

您还可以see an updated version of your original example here .