Question

在这个例子中。通过单击缩略图，大图像会发生变化。我想为选定的缩略图添加边框。

HTML

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

CSS

.small-images a, .big-images a {display:inline-block}
.small-images a.selected {border:1px solid red}

当前的jQuery代码

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

Answer 1

您的CSS正在使用a类而不是selected标记来查找img个标记：

此：

.small-images a.selected {border:1px solid red}

应改为：

.small-images .selected {border:1px solid red}

除此之外，你只需要点击添加和删除selected课程：

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var $this = $(this),
            index = $this.index();
        $(".small-images img").removeClass('selected');
        $this.addClass('selected');
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

以下是演示：http://jsfiddle.net/Qhdaz/6/

<强>已更新

我建议通过缓存$(".small-images img")选项来优化代码，因为它将在每个click事件处理程序中使用：

$(function(){
    var $thumbnails = $(".small-images img");

    //this will add the `selected` class to the first thumbnail on-load
    $thumbnails.eq(0).addClass('selected');
    $("#big-image img:eq(0)").nextAll().hide();
    $thumbnails.click(function(e){

        //cache the `$(this)` selector since it will be used more than once
        var $this = $(this),
            index = $this.index();

        //remove `selected` class from all thumbnails
        $thumbnails.removeClass('selected');
        //add `selected` class to selected thumbnail
        $this.addClass('selected');

        $("#big-image img").eq(index).show().siblings().hide();
    });
});

以下是演示：http://jsfiddle.net/Qhdaz/12/

以下是为快速运行而优化的代码：

CSS -

/*this will hide the full-sized images by default to take care of the flickering on-load*/
#big-image img {
    display : none;
}

JS -

$(function(){

    //cache both the thumbnails and the full-sized images so when we do work on them we don't have to wait for the performance hating selector to do it's magic
    var $thumbnails = $(".small-images img"),
        $fullsized  = $("#big-image img");

    //add `selected` class to first thumbnail
    $thumbnails.eq(0).addClass('selected');

    //show first full-sized image (no
    $fullsized.eq(0).show();

    //add `click` event handlers to all the thumbnails
    $thumbnails.click(function(e){

        //cache the `$(this)` selector since it will be used more than once
        var $this = $(this),
            index = $this.index();

        //remove the `selected` class from all thumbnails
        $thumbnails.removeClass('selected');

        //add the `selected` class to selected thumbnail
        $this.addClass('selected');

        //hide all the full-sized images and show the currently selected index
        $fullsized.hide().eq(index).show();
    });
});

演示：http://jsfiddle.net/Qhdaz/13/

Answer 2

----更新版本---- 如果你不需要任何动画，你可以使用更多的CSS。这个例子展示了一些CSS3样式和一个简短的jQuery脚本来改变图像。

http://jsfiddle.net/pixelass/hzLfV/7/

的jQuery

$(function() {
    $(".small-images img").click(function() {
        $('.selected').removeClass('selected');
        var index = $(this).index();
        $("#big-image img.active").removeClass('active');
        $("#big-image img").eq(index).addClass('active');
        $(this).addClass('selected');
    });
});

CSS

#wrapper  { 
    height:280px;
    width:420px;
    background:#fff;
    overflow:none;
}
#big-image {
    height:220px;
}
#big-image img  {
    position:absolute;
    top:5px;
    left:5px;
    display:none;
    box-shadow:0 4px 4px rgba(0,0,0,0.8);
    -moz-box-shadow:0 4px 4px rgba(0,0,0,0.8);
    -webkit-box-shadow:0 4px 4px rgba(0,0,0,0.8);
    -o-box-shadow:0 4px 4px rgba(0,0,0,0.8);
}
#big-image img.active  {
    display:block;
}
.small-images {
    position:absolute;
    top:220px;
    left:5px;
    height:60px;
}
.small-images img {
    border:5px solid white;
    box-shadow:0 2px 2px rgba(0,0,0,0.8);
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.8);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.8);
    -o-box-shadow:0 2px 2px rgba(0,0,0,0.8);
    display:inline;
    display:inline-block;
    float:left;
    margin:0 5px 0 0;
}
.small-images img.selected {
    border:5px solid #888;
}

HTML

<div id="wrapper">
    <div id="big-image">
        <img src="http://lorempixel.com/400/200/sports/1/" class="active">
        <img src="http://lorempixel.com/400/200/fashion/1/">
        <img src="http://lorempixel.com/400/200/city/1/">
    </div>

    <div class="small-images">
        <img src="http://lorempixel.com/100/50/sports/1/" class="selected">
        <img src="http://lorempixel.com/100/50/fashion/1/">
        <img src="http://lorempixel.com/100/50/city/1/">
    </div>
</div>

Answer 3

您可以通过以下代码实现：

$(function(){
    var selected;
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
        if (typeof selected !== 'undefined') {
            selected.removeClass('selected');
        }
        $(this).addClass('selected');
        selected = $(this);
    });
});

你有这些课程的地方：

.small-images a, .big-images a {display:inline-block}
.small-images .selected {border:1px solid red}

在匿名函数的第一行中，您将定义变量，以便保留当前所选图片。

使用if条件，您正在检查是否已经有任何选定的拇指，所以如果存在这样的拇指，您将删除它的边框，为新的边框添加边框并将其选中。

如何在这里动态地将类.selected添加到所选元素？

3 个答案: