如何在单击时依次更改类

Question

假设我有一个div列表：

<div id='d-1' class='hidden'>this one<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='show'>Second one
<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='hidden'>Third one<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='hidden'>Fouth one
<br />
    <button onclick='next();'>Next</button>
</div>

和css：

.show {
  color: red;
}

.hidden {
  color: green;
}    

怎样才能依次更改类呢？

我试着这样做：

$(function(){
 function next(){
 $(this).removeclass('show').addclass('hidden');
 }
});

有什么帮助吗？这是我在小提琴中的代码

编辑

更新的这里

Answer 1

你的问题有几个方面，所以要试着逐个推进。如果使用chrome工具，可以看到控制台报告Uncaught ReferenceError: next is not defined。要获得此错误，请将function next()移到文档之外。所以这就是

// this does not work
$( document ).ready(function() {    
    function next(){
         $(this).removeclass('show').addclass('hidden');
    }
});

变成这样

function next(){
    $(this).removeclass('show').addclass('hidden');
}

$( document ).ready(function() {    
    // next moved outside   
});

正如您现在看到的，您不再需要document.ready了。

在chrome开发工具上可以看到的下一个错误是Uncaught TypeError: Object [object Object] has no method 'removeclass'。原因是这个方法(正如其他人已经说过的)是removeClass

​

​

更改此错误和使用addClass的错误，我添加了console.log('this', this);以找出对象的this点。

function next(){
    console.log('this', this);
    $(this).removeClass('show').addClass('hidden');
}

现在，您可以在chrome工具中看到this指向对象Window。因此，您必须重新考虑如何确保next()指向正确的对象。我喜欢传递id，或者在本例中传递jQuery选择器(# + id)。

<div id='d-1' class='isActive'>first one<br />
    <button onclick="next('#d-1');">Next</button>
</div>

我根据你的意思改变了类名。

function next(jQSelector){      
     $(jQSelector).removeClass('isActive').addClass('isPassive');
}

第一部分演示

不，这适用于第一个<div id='d-1' ...。看一看 演示1。但我想你还想要更多。这取决于你的意思。应该单击d1的按钮吗

• 彩色d2绿色和d1红
• 或者d1是绿色的，下一个div (d2)是红色的。

选项1使当前活动(红色)所有其他被动(绿色)

在这个演示在第二个标题下中，单击按钮会使父div活动(红色)，所有其他的都是被动的。

<div id='d-1' class='myDivs isActive'>first one<br />
    <button onclick="makeActive('#d-1');">make active</button>
</div>
<div id='d-2' class='myDivs isPassive'>Second one<br />
    <button onclick='makeActive();'>make active</button>
</div>

以及javascript

function makeActive(jQSelector){

    console.log('makeActive', jQSelector, $(".myDivs"));
    // set every element with class .myDivs to passive
    $(".myDivs").removeClass('isActive').addClass('isPassive'); 

    // only set one element to active   
    $(jQSelector).removeClass('isPassive').addClass('isActive');
}

Answer 2

您的"addclass“和"removeclass”应该是camel大小写"removeClass“，如下所示。

对相同的元素使用.toggleClass()而不是使用.removeClass()和.addClass()。

$(function(){
    $("button").click(function() { 

      $(this).parent().toggleClass('show hidden');
    });

});

http://jsfiddle.net/kXNk8/117/