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.removeClass()

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

Answer 2

我看到你正在使用jQuery（并相应地编辑了你的问题）。

使用jQuery，使用CSS语法获取匹配元素列表非常容易：

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

获取具有“selectedId”类的元素的直接子元素的列表，其具有“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 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 &lt; 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>

希望它有所帮助。

从当前组中删除类

4 个答案: