如果您查看js小提琴,您会发现单击缩略图会更改图像以及.currentimgtitle
文本值,但当我只想更改时,它会更改页面上的所有.currentimgtitle
文本值一个与之相关的jquery和html在
$(".imgcontainer").each(function() {
var imgsrc = $(".minicontainer img:first-child", this).attr("src");
var imgtitle = $(".minicontainer img:first-child", this).attr("title");
$(this).append('<div class="presentouter"><img src="' + imgsrc + '" class="presentimg"/><div class="currentimgtitle" title="' + imgtitle + '">' + imgtitle + '</div></div>');
});
$(".miniimg, .miniimg2, .miniimg3").click(function() {
var miniimgrc = $(this).attr("src"),
$presentImg = $(this).closest(".imgcontainer").find(".presentimg");
$presentImg.attr('src', miniimgrc);
});
$(".miniimg, .miniimg2, .miniimg3").click(function(index) {
var miniimgtitle = $(this).attr("title"),
$presentTitle = $(this).closest(".imgcontainer").find(".currentimgtitle");
$presentTitle.attr('title', miniimgtitle);
});
$(".imgcontainer").each(function(index) {
$(".miniimg, .miniimg2, .miniimg3").click(function() {
var textval = $(this).attr("title");
$(".currentimgtitle").text(textval);
});
});
<div class="imgcontainer">
<div class="minicontainer">
<img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUeMwXoI/AAAAAAAAFoc/7f0Um7OTgNg/s000/Antartic-by-Peter-Rejcek.jpg" title="icy mountains" class="miniimg"/>
<img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUFUhg6I/AAAAAAAAFoY/GToUxRYcteY/s000/Antartic-by-Kelly-Speelman.jpg" title="icy planes and hills" class="miniimg2"/>
<img src="http://lh4.googleusercontent.com/_Zuzii37VUO4/Ta0nTs8AbPI/AAAAAAAAFoU/zCvNKv4kfe4/s000/BeachWaves-By-RePublicDomain.jpg" title="sun rise with clouds" class="miniimg3"/>
</div>
</div>
<div class="imgcontainer">
<div class="minicontainer">
<img src="http://3.bp.blogspot.com/-EyJOI3UFWvo/Te5KHGgOpSI/AAAAAAAAESY/PhG66jWB1OA/s200/blogger-featured-slideshow.png" title="Blogger Logo" class="miniimg"/>
<img src="http://2.bp.blogspot.com/-BKPnpE6QpfY/TewL7Q16ipI/AAAAAAAAERg/pxn6NY1nNsg/s640/best-blogger-template-stunning-slider-magazine.PNG" title="blogger template" class="miniimg2"/>
<img src="http://4.bp.blogspot.com/-gxaZr19LXtY/TdRcJrxv3gI/AAAAAAAAD68/KaX9UN0B2nE/s640/advanced-design-magazine-blogger-template.PNG" title="another blogger template" class="miniimg3"/>
</div>
</div>
答案 0 :(得分:3)
虽然我看到你已经接受了答案,但这种方法看起来效果很好:
$('.minicontainer img').click(
function(){
var miniImgSrc = this.src,
imgTitle = this.title,
$container = $(this).closest('.imgcontainer');
$container
.find('.presentimg')
.attr('src',miniImgSrc);
$container
.find('.currentimgtitle')
.attr('title',imgTitle)
.text(imgTitle);
});
参考文献:
答案 1 :(得分:2)
为什么不改变
$(".currentimgtitle").text(textval);
到
$(this).closest(".imgcontainer").find(".currentimgtitle").text(textval);
就像你做了几行更高?
答案 2 :(得分:1)
试试这个例子,有点清洁。对于下一步,我最好将它包装进去,不用js用户。