添加类onclick,然后在下次单击时按该类选择

我只是在尝试更多地了解jquery的测试场景。 我明白我想要做的事情是行不通的,我确信我可以查找一个更复杂的解决方案,包括切换或其他什么,但我想知道为什么这不会起作用的逻辑……

我想有一个按钮,按下时插入文字。 再次按下它时会插入一组不同的文本。 我正在尝试使用整个添加/删除类的东西,所以我试图将类’text1’添加到我的textarea div。 然后我继续创建另一个单击函数,尝试选择我刚刚添加的’text1’类并再次插入HTML。

如果我在’textarea’下面有’textarea.text1’选择器(如我的例子所示)选择器,它可以理解地通过并添加text1类然后找到它并立即输入“Text Content 2”

我认为通过上面的’textarea.text1’选择器它会移动到第一个.click而不做任何事情然后添加类。 这似乎不起作用……

然后,我希望再次单击ChangeText按钮,让它在我的脚本的第一部分中找到该类…..

任何人都可以解释为什么这不起作用和最简单的方法来实现这一目标?

提前致谢。

使用Javascript:

$(document).ready(function() { $('.changetext').click(function() { $('.textarea').html('

Text Content 1

').addClass('text1'); }); $('.changetext').click(function() { $('.textarea.text1').html('

Text Content 2

'); }); });

HTML:

  

Jfiddle: http : //jsfiddle.net/nlaffey/qzKJx/1/

目前还不是很清楚你要做什么。 我想你知道你是双重绑定click事件。 我认为根本问题是如何通过单击按钮来循环浏览一些文本和类。

 $(document).ready(function () { var $ta = $('.textarea'), text = ['Text Content 1', 'Text Content 2', 'Text Content 3']; $('.textarea').data('textindex', -1); function rotateText(){ var cls = $ta.prop('class'), idx = $ta.data('textindex'), maxidx = text.length; if (idx++ == maxidx - 1) idx = 0; while(maxidx--){ $ta.removeClass('text' + maxidx ); } $ta.html(text[idx]).addClass('text' + (idx)) .data('textindex', idx); } $('.changetext').click(rotateText); }); 

http://jsfiddle.net/bxQ5r/

为什么要对单个按钮使用多个单击事件,可以执行此操作

 $('.changetext').click(function () { if(!$('.textarea').hasClass('text1')) { $('.textarea').html('

Text Content 1

').addClass('text1'); } else { $('.textarea').removeClass('text1'); $('.textarea.text1').html('

Text Content 2

'); } });

看到这里提琴手代码