Question

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

我建议可见的幻灯片将包含＆＃34;活跃＆＃34;等等，而其他人有＆＃34;不活动＆＃34;类。我有一个按钮，如果单击该按钮，应该在幻灯片之间切换类。检查代码：

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>

jQuery的：

$(".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");
    }
});

问题是，在第一次单击＆＃34; sliderNext＆＃34;时，类activeSlider和inactiveSlider在div之间交换。但是在第二次点击时，它并没有。

Answer 1

addClass和removeClass期望类名，而不是选择器。 .activeSlider是选择器。 activeSlider是一个班级名称。

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

需要

....removeClass("activeSlider");

Answer 2

在第二行中执行此操作：

$(".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");
    }
});

看这个FIDDLE

Answer 3

你的代码中存在逻辑问题 - 使用console.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 - 你现在已经是这个了。

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

jQuery类选择

3 个答案: