从当前组中删除类

Question

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

我需要做的是单击缩略图后，从所有其他缩略图中删除“选定”类，或者不从页面上的其他画廊中删除它们。现在，除了删除类之外，我一切正常。有人在另一个问题上帮助了我，但不够具体（我的 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);
     }
 });

我假设“选择”类对于淡化效果看起来正确不是必需的。

请注意，如果单击的元素已经具有类，则上述内容将如何完全忽略单击。如果您不希望这样，请删除hasClass 检查并将.not(clicked) 添加到previous = $(thumbs+'.'+clickedClass) 行的末尾，但是如果您已经完成了，我不知道您在那时会做什么一次。

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

Answer 2

你应该看看

jQuery.removeClass()

所以重点是首先遍历所有图像并取消设置类名，然后在活动图像上设置类。

Answer 3

使用.closest('.jcarousel-clip')获取父div， 然后找到所有缩略图并使用.removeClass('selected')。

Answer 4

嗨，安迪，您的问题不清楚，但我会尽力帮助您。 我正在努力提供帮助，我在 javascript 方面的技能也不是那么好，而且我不确定我是否理解了这个问题，请不要投票给我。

     function focusme(){
         document.getElementById("focusme").focus();
       }
     function changeToCurrent(obj){
         var menucont = document.getElementById('menu');
         var arrLink = menucont.getElementsByTagName('a');
        for (var i = 0 ; i < arrLink.length; i++){
             arrLink[i].className=''; 
          }
          obj.className = "current";
         }



<div class="menu" id="menu" >
     <a  href='' id='focusme' onclick='changeToCurrent(this)'>link1</a>
     <a  href='' onclick='changeToCurrent(this)'>Once Only link2</a>
     <a  href='' onclick='changeToCurrent(this)'>link3</a>
     <a  href='' onclick='changeToCurrent(this)'>link4</a>
     <a  href='' onclick='changeToCurrent(this)'>link5</
     <a href="">link6</a>
</div>

希望对你有帮助。