使用jquery在活動div上添加類

Question

JSFiddle。我想在當前活動div上添加類。我知道我需要使用addClass（），但我不知道我在哪裏使用它？

HTML：

<div class="myclass selected"> 
Content 1 
</div> 
<div class="myclass"> 
    Content 2 
</div> 
<div class="myclass"> 
Content 3 
</div> 

<ul> 
    <li><img  src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx"  /></li> 
    <li><img  src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-   Valued_image_seal.svg.png" /></li> 
    <li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li> 
</ul> 

<a class="next">next</a> 

的jQuery：

$('img', 'ul').on('click', function() { 
    $(".myclass").eq($(this).parent('li').index()).show() 
       .siblings('div').hide(); 
}); 

$('.selected').show(); 

$(".next").click(function(){ 
    if ($('.myclass:visible').length) { 
     var curr = $('.myclass:visible'), 
      next = curr.next('.myclass').length? curr.next('.myclass'):$('.myclass').first(); 

     curr.hide(); 
     next.show(); 
    }else{ 
     $('.myclass').first().show(); 
    } 
}); 

Answer 1

不能完全確定，你真的想添加/刪除類，但看看：

$(".next").click(function(){ 
    if ($('.myclass:visible').length) { 
     var curr = $('.myclass:visible'), 
      next = curr.next('.myclass').length?curr.next('.myclass'):$('.myclass').first(); 

     curr.hide().removeClass('someClassHere'); 
     next.show().addClass('someOtherClassHere'); 
    }else{ 
     $('.myclass').first().show(); 
    } 
}); 

JSFiddle

Answer 2

聽起來好像您正在嘗試向要展示的元素中添加一個類，並將其從您隱藏的元素中移除。這應該是這樣做的：http://jsfiddle.net/cjc343/b3VaX/15/

我所做的更改非常簡單：在每個點擊事件中，當您顯示（）某物時，會添加「selected」類，並且當您隱藏（）某物時，它是除去。

Answer 3

也許這是你想要做 http://jsfiddle.net/unloco/b3VaX/39/

CSS什麼：

li.active img{border:1px solid red} 

首先， '激活' 第一里，

$('ul#myul li:first').addClass('active'); 

然後點擊激活下一個：

$('ul#myul li.active').removeClass('active').next().addClass('active').length || 
$('ul#myul li:first').addClass('active'); 

Answer 4

您打算突出顯示當前有效的li嗎？ http://jsfiddle.net/b3VaX/50/

你的代碼很好，但如果你的CSS焦點在突出顯示，你的JavaScript可以只是擔心切換活動元素的CSS類。

setActive(0); 

$('li').click(function() { 
    setActive($(this).index()); 
}); 

$(".next").click(function(){ 
    var current = $('ul li.selected').index(), 
     maxIndex = $('ul li').length - 1, 
     next = (current + 1) > maxIndex ? 0 : (current + 1); 

    setActive(next); 
}); 

function setActive(i) { 
    var li = $('ul li').eq(i); 

    $('ul li').removeClass('selected'); 
    li.addClass('selected'); 
    $('.myclass').removeClass('selected'); 
    $('.myclass').eq(i).addClass('selected'); 
} 

​ 

CSS：

.myclass.selected { 
    display: block; 
} 

ul li.selected { 
    background-color: yellow; 
}