如何遍历并匹配相同 class 和 Jquery 的对象？

Question

我正在研究（应该是什么）并且简单 jQuery 轮播。我从事的大部分项目，最后一点让我摸不着头脑。 Whosebug 有 1000 多个类似的主题，此时我已经从我读过的主题中排除了许多独特的解决方案。

轮播的基本框架正在运行。我想放置将以全尺寸显示的实际图像，而不是用于导航和定位的小灰点。我的问题是，当我点击这张图片时，我不知道如何匹配 classes，这样图片就会显示在实际的轮播中。我想知道，从理论上讲，应该采取什么步骤来实现这一目标。

相关代码如下：

<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=$'many/different/ways']").在我的尝试中
photo/img1.png, img1, img1.png, src=$[' " + var_with_src_ + " ']); （控制台显示 == photo/img1.png）无效。

然后我决定弄乱 classes。我尝试了 .each() 并且可以让控制台列出 div.car 中的所有 img classes，但是当我说 $(".car").each(function(){ if( this == imgClass) { this.addClass("show"); } }); 也有 $(this).addClass 和控制台时在第一种情况下错误是 "this.addClass is not a function." 而在第二种情况下绝对没有错误，所以我假设它运行但我的眼睛看不到任何变化。

无论哪种情况，理论上我应该在这里做什么，以便在单击小图像时，轮播显示相同 class 的大图像？（或者也许更好地说：我如何循环遍历 div 中可用的 classed，将其中之一匹配到变量，并将 class 显示添加到它）

Answer 1

and the console error was "this.addClass is not a function." Perhaps "this" is an array or list of values?

这表示 jquery 选择但仅表示 DOM 对象如果你想使用来自 jQuery

的 .addClass 链函数，你必须执行 $(this)

所以

$(this).addClass('show')

Answer 2

你的代码段，

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

应替换为

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

在这些'each'回调中，this是一个JS对象而$(this)是一个jQuery对象。两个对象都代表 DOM 元素 class car.

如果你想用 imgSrc 而不是 imgClass 来控制 if 语句，

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

如何遍历并匹配相同 class 和 Jquery 的对象？

How to iterate through and match objects of the same class with Jquery?

jquery

if-statement

carousel

addclass

removeclass