Question

我正在研究（应该是什么）和简单的jQuery轮播。我工作的大部分项目，最后一点让我挠头。 StackOverflow有1000多个类似的主题，我在这一点上原谅了许多我读过的独特解决方案。

旋转木马的基本骨架正在工作。我想放置将以全尺寸显示的实际图像，而不是用于导航和定位的小灰点。我的问题是当我点击这个图像时，我不知道如何匹配，在我的情况下，这些类将使图像显示在实际的轮播本身中。理论上，我想知道应该采取什么步骤来实现这一目标。

以下是相关代码：

<section class="main-content">
    <div id="main-car flr">

    <div class="flr btn-right">
        //class needs to be left - objects floated right
        <a href="#" class="left">Right</a>
    </div>

    <div class="car flr">
        <img class="container-car img1 show" 
             src="photo/img1.png">
        <img class="container-car img2" 
             src="photo/img2.png">
        <img class="container-car img3" 
             src="photo/img3.png">
   </div>



       <div class="flr btn-left">
        <a href="#" class="right">Left</a>
      </div>

    <div id="clickme">
        <img id="small-1" class="img1 show" 
             src="photo/img1.png">
        <img id="small-2" class="img2" 
             src="photo/img2.png">
        <img id="small-3" class="img3" 
             src="photo/img3.png">

    </div>
</div>

和jQuery：

$(document).ready(function(){

$(".flr").find("a").click(function() {

    if ($(this).attr("class") == "left") {
      csail("left");
    } else {
      csail("right");
    }
  });

  function csail(direction) {
    //find the img with the class "show"
    var car = $(".car").find(".show");
    var smallImg = $("#clickme").find(".show");

    if (direction == "left") {
      if (car.prev().length) {
        //move the selected class to the previous img in .car
        car.removeClass("show").prev().addClass("show");
        smallImg.removeClass("show").prev().addClass("show");
      } else {
        //there isn't a previous (you're on the first)
        //show the last element in the list.
        car.removeClass("show");
        smallImg.removeClass("show");
        $(".car").find(".container-car:last").addClass("show");
        $("#clickme").find("img:last").addClass("show");
      }
      //endif


    } else { //clicked right
      //move the selected class to the next img in .car
      if (car.next().length) {
        car.removeClass("show").next().addClass("show");
        smallImg.removeClass("show").next().addClass("show");
      } else {
        //there isn't a next div (you're on the last)
        //show the first
        car.removeClass("show");
        smallImg.removeClass("show");
        $(".car").find(".container-car:first").addClass("show");
        $("#clickme").find("img:first").addClass("show");
        //endif
      }
    }
  }


$("#clickme img").click(function(){
    //get src of the img clicked (works)
    var imgClass = $(this).attr("class");
    console.log(imgClass);
    //test
    //get the src of the current img in .car (works)
    var carClass = $(".car img").attr("class");
    console.log(carClass);
    //Remove class show from .car(works)
    $(".car img.show").removeClass("show");
    //add class show to .car img of same class as imgClass

    ???

    });

});

最初我正在使用图像src $（ “IMG [SRC = $ '许多/不同/方式']”）。在我的尝试中 photo / img1.png，img1，img1.png，src = $ ['“+ var_with_src_ +”']）; （控制台显示= = photo / img1.png）无效。

然后我决定搞乱课程。我尝试了.each（）并且可以让控制台列出div.car中的所有img类，但是当我说$(".car").each(function(){ if( this == imgClass) { this.addClass("show"); } });之类的东西也带有$(this).addClass并且控制台错误是“this.addClass is不是功能。“在第一种情况下，绝对没有在第二种情况下，所以我认为它已经运行，但我的眼睛没有任何改变。

在任何一种情况下，理论上我应该在这里做什么，这样当点击一个小图像时，轮播显示相同类的大图像？（或者更好的说明：我如何遍历div中的可用分类，将其中一个与变量匹配，并将类show添加到其中）

Answer 1

您的代码段

$(".car").each(function(){ 
    if( this == imgClass) 
    { 
        this.addClass("show"); 
    } 
});

应替换为

$(".car").each(function(){ 
    if( $(this).hasClass(imgClass) ) 
    { 
        $(this).addClass("show"); 
    } 
});

在这些＆＃39;每个＆＃39;回调，this是一个JS对象，而$(this)是一个jQuery对象。两个对象都表示具有类car的DOM元素。

如果要使用imgSrc而不是imgClass控制if语句，

$(".car").each(function(){ 
    if( $(this).attr('src') == imgSrc ) 
    { 
        $(this).addClass("show"); 
    } 
});

Answer 2

并且控制台错误是“this.addClass不是函数”。也许“this”是数组或值列表？

这表示jquery选择但仅表示DOM对象如果你想使用来自jQuery的.addClass链函数

，你必须做$（this）

所以

$(this).addClass('show')

如何使用Jquery迭代并匹配同一个类的对象？

2 个答案: