javascript - 从当前组中删除类

Question

查看问题的最简单方法是检查此处的代码:http://www.studioimbrue.com/beta

我需要做的是单击缩略图后，从同一缩略图中的所有其他缩略图中删除“选定”类，或者不从页面上的其他画廊中删除它们。现在，除了类(class)移除外，我一切正常。有人在另一个问题上帮助了我，但不够具体(我的 javascript 技能不是那么好!)我正在使用 jQuery。感谢您的帮助。

那么在那种情况下，我不确定为什么这不能正常工作:

$(document).ready(function(){ 
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.6,
        fadeTime = 100,
        clickedClass = "selected",
        thumbs = ".thumbscontainer ul li img";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
     $(thumbs).click(function() {
         // Remove selected class from any elements other than this
         var previous = $(thumbs+'.'+clickedClass).eq();
         var clicked = $(this);
         if(clicked !== previous) {
             previous.removeClass(clickedClass);
         }
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});

Answer 1

我看到您正在使用 jQuery(并相应地编辑了您的问题)。

使用 jQuery，使用 CSS 语法获取匹配元素列表真的很容易:

var list = $('#parentId > .selected');

获取 ID 为“parentId”且类为“selected”的元素的直接子元素的列表。然后你可以用它们做一些事情，比如:

list.removeClass("selected");

然后在要选择的元素后面加上“selected”。

编辑我认为应该这样做:

$(thumbs).click(function() {
     // Remove selected class from any elements other than this
     var clicked, previous;
     clicked = $(this);
     if (!clicked.hasClass(clickedClass)) {
         previous = $(thumbs+'.'+clickedClass);
         previous.removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     }
 });

我假设“selected”类对于看起来正确的淡入淡出效果不是必需的。

请注意，如果被点击的元素已经有类，上面的代码将如何完全忽略点击。如果您不希望这样，请删除 hasClass 检查并将 .not(clicked) 添加到 previous = $(thumbs+'.'+ clickedClass) 行，但我不知道如果你已经做过一次，你的淡入会在那个时候做什么。

我没有得到悬停的东西；我以为你希望这发生在点击时，而不是悬停时。