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

时间:2013-06-01 07:33:54

标签: jquery class text click

我只是在尝试更多地了解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('<p> Text Content 1</p>').addClass('text1');
    });
    $('.changetext').click(function() {
        $('.textarea.text1').html('<p> Text Content 2</p>');
    });
});

HTML:

<body>
    <div class="textarea"></div>
    <button class="changetext">ChangeText</button>
</body>

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

2 个答案:

答案 0 :(得分:2)

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

$('.changetext').click(function () {
if(!$('.textarea').hasClass('text1'))
{
    $('.textarea').html('<p> Text Content 1</p>').addClass('text1'); 
 }
else
{      
$('.textarea').removeClass('text1');
    $('.textarea.text1').html('<p> Text Content 2</p>');
}
 });

Fiddler code

答案 1 :(得分:0)

目前还不是很清楚你要做什么。我想你知道你是双重绑定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/