如何遍历并匹配相同 class 和 Jquery 的对象?
How to iterate through and match objects of the same class with Jquery?
我正在研究(应该是什么)并且简单 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 显示添加到它)
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')
你的代码段,
$(".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");
}
});
我正在研究(应该是什么)并且简单 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 显示添加到它)
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')
你的代码段,
$(".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");
}
});