Question

我从数组中动态生成缩略图以切换页面的背景图像：

<?php
            for($i=0; $i < count($imageArray); $i++){
                 echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" />');
            }
        ?>

我希望在缩略图图像为选定/活动背景时添加一类“当前”：

$('#bkgrSelector img').toggleClass(current, addOrRemove);

jQuery的toggleClass应该可以解决这个问题，但是当我选择一个新的时，我想要清除之前点击过的图像。

我该怎么做？

有没有更好的方法通过PHP或jQuery切换图像缩略图上的当前类？

根据请求，来自该PHP数组的后期渲染位如下：

<div id="bkgrSelector"> 
    <div class="scrollNav"> 
        <a class="prev"></a> 
    </div> 
    <div class="scrollable">   
        <div class="items" id="thumbs"> 
            <img onclick="changeBig('Antipasti.jpg')" src="/lib/img/bkgr/Antipasti.jpg" alt="thumbnail image" width="77" height="44" />

Answer 1

让所有缩略图都有一个共同的类，例如thumb。然后，您可以选择所有thumb张图片，然后关闭current课程。然后为选定的一个打开它：

//make no thumb have the current class
$('img.thumb').removeClass('current');

//Add the class to your selected item
$selected.addClass('current');

您需要在循环中添加thumb类：

for($i=0; $i < count($imageArray); $i++){
    echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" class="thumb" alt="thumbnail image" width="77" height="44" />');
}

Answer 2

只需从现有图像中删除该类，然后再将其添加到新图像中。

使用jQuery

$("img").click( function() {
    //remove class from existing
    $("img.selected").removeClass('selected');
    //add class for current
    $(this).addClass('selected');
});

Answer 3

从所有其他图片中删除公共class，然后将其重新应用于所选图像。

$('#bkgrSelector img').click(function(){
    $('#bkgrSelector img').removeClass('selected');
    $(this).addClass('selected');
});

切换CSS类但在新单击后禁用其他元素的类

3 个答案: