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

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

<?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" />');
            }
        ?>

jQuery的toggleClass应该可以做到这一点，但我希望在选择新的图像时，将该类从以前单击的图像中清除

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

我该怎么做呢

有没有更好的方法通过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" />

---

让所有缩略图都有一个公共类，例如

thumb

。然后，您可以选择所有

thumb

图像，并关闭

当前

类。然后，为所选对象启用该选项：

//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" />');
}

（$i=0；$i{ 回声（“”）； }

---

所有缩略图都有一个公共类，例如

thumb

。然后，您可以选择所有

thumb

图像，并关闭

当前

类。然后，为所选对象启用该选项：

//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" />');
}

（$i=0；$i{ 回声（“”）； }

---

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

使用jQuery

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

---

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

使用jQuery

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

---

从所有其他图像中删除公共

类

，然后将其重新应用于所选图像

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

---

从所有其他图像中删除公共

类

，然后将其重新应用于所选图像

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

---

如果希望避免重新加载页面，请使用JavaScript（或jQuery库），如果不介意重新加载页面，请使用php。您可以发布页面的呈现html标记（

查看源代码

）？如果您想避免重新加载页面，请使用JavaScript（或jQuery库），如果您不介意重新加载页面，请使用php。您可以发布页面的呈现html标记吗（

查看源代码

）？虽然这三个解决方案都有效，但这是我使用的解决方案。虽然这三个解决方案都有效，但这是我使用的解决方案。