jQuery class selecting

jQuery class selecting

本文关键字：selecting class jQuery      更新时间：2023-09-26

我正在构建一个简单的滑块。它将有两张或更多张幻灯片。它们都分组在一个div 中，溢出：隐藏和 z 索引完成。

我建议可见的幻灯片将具有"活动"类

，而其他幻灯片具有"非活动"类。我有一个按钮，如果单击它，应该在幻灯片之间切换类。检查代码：

.HTML：

<div class="thumbSlider">
<div class="activeSlider">
  <img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider1.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider2.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider3.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider4.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider5.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider6.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider7.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider8.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider9.jpg">
<img class="sliderNext" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/sliderNext.png" >
</div>
<div class="inactiveSlider">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider8.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider1.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider2.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider3.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider4.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider5.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider6.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider7.jpg">
<img class="thumbUnit" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/slider9.jpg">
<img class="sliderNext" src="<?php echo get_template_directory_uri(); ?>/images/upperSlider/sliderNext.png" >
</div>
  </div>

j查询：

$(".sliderNext").click(function(){
$(".activeSlider").addClass("inactiveSlider").removeClass("activeSlider");
var $next = $(".inactiveSlider").next();
    if($next.length == 0){
    $(".inactiveSlider").first().addClass("activeSlider").removeClass("inactiveSlider");
    }
    else {
    $next.addClass("activeSlider").removeClass("inactiveSlider");
    }
});

问题是，在第一次单击"滑块下一步"时，类 activeSlider 和 inactiveSlider，在div 之间交换。但是在第二次点击时，它没有。

addClass和removeClass需要类名，而不是选择器。 .activeSlider是一个选择器。 activeSlider是一个类名。

....removeClass(".activeSlider");

需要

....removeClass("activeSlider");
你的

代码中有一个逻辑问题 - 使用控制台.log我们可以看到，next.length == 0永远不会发生。 这是因为选择器总是返回第一个'inactiveSlider'的下一个节点。

这是我的解决方案：http://jsfiddle.net/vsjb6pbd/2/

$(".sliderNext").click(function () {
    $(".activeSlider").toggleClass("inactiveSlider activeSlider");
    var $next = $(this).parent().next();
    console.log($next);
    if ($next.length === 0) {
        console.log("now i'm here");
         $(".inactiveSlider:first").addClass("activeSlider").removeClass("inactiveSlider");
    } else {
        console.log("now i'm there");
        $next.addClass("activeSlider").removeClass("inactiveSlider");
    }
});

我通过选择$(this).parent().next();更改了您的下一个变量$（this） 是您单击的元素 - 幻灯片div 的子元素然后，.parent 选择您单击的元素的父元素，即幻灯片div。.next - 好吧，你现在已经是这个了。

另一种选择是，在选择下一张幻灯片后切换类......

在第二行执行此操作时：

$(".activeSlider").addClass("inactiveSlider").removeClass("activeSlider");

所有div 元素都有一个类 inactiveSlider。所以当你这样做时 

var $next = $(".inactiveSlider").next();

您将始终获得第二个.thumbSlider子项。

深入研究你的逻辑，我发现你需要稍微改变一下：

$(".sliderNext").click(function(){
    // Remove this line. It makes all sliders inactive
    // $(".activeSlider").addClass("inactiveSlider").removeClass("activeSlider");
    // Get the next inactive slider from the active one
    var $next = $(".activeSlider").next();
    // I moved the first line to here
    $(".activeSlider").addClass("inactiveSlider").removeClass("activeSlider");
    // Test if there's an inactive from the active one
    if($next.length == 0){
        $(".inactiveSlider").first().addClass("activeSlider").removeClass("inactiveSlider");
    } else {
      $next.addClass("activeSlider").removeClass("inactiveSlider");
    }
});

看这个小提琴

相关文章：