当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - remove class from current group

问题描述:

The easiest way to see the problem is checking the code here: http://www.studioimbrue.com/beta

What I need to do is once a thumbnail is clicked, to removed the "selected" class from all other thumbnails that are in this same or without removing them from the other galleries on the page. Right now, I have everything working except the class removal. Someone helped me in another question but wasn't quite specific enough (my javascript skills aren't all that great!) I'm using jQuery. Thanks for the help.

Well in that case, I'm not sure why this doesn't work properly:

$(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);

});

});

网友答案:

I see you're using jQuery (and have edited your question accordingly).

With jQuery, it's really easy to get a list of matching elements using CSS syntax:

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

That gets a list of the direct children of the element with the ID "parentId" that have the class "selected". You can then do things with them, such as:

list.removeClass("selected");

Then add "selected" to the element you want to select.

Edit I think this should do it:

$(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);
     }
 });

I'm assuming there that the "selected" class isn't necessary for the fade effect to look right.

Note how the above will completely ignore the click if the clicked element already has the class. If you don't want that, remove the hasClass check and add .not(clicked) to the end of the previous = $(thumbs+'.'+clickedClass) line, but I don't know what your fade in would do at that point if you've already done it once.

I'm not getting the hover stuff; I thought you wanted this to happen on click, not hover.

网友答案:

You should take a look at

jQuery.removeClass()

So the point would be to first iterate trough all the images and unset the classname and than set the class on the active one.

网友答案:

Use .closest('.jcarousel-clip') to get the parent div, then find all the thumbnails and use .removeClass('selected').

网友答案:

Hi Andy it isn't clear your question, but I am going to try to help you. I am trying to help, and my skills on javascript arent that good either, plus I am not sure if I undertood the question right, please, dont vote me down.

     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>

Hope it helps.

分享给朋友:
您可能感兴趣的文章:
随机阅读: