在单击时添加类，然后在下次单击时按该类进行选择答案

【问题标题】：Adding class onclick and then selecting by that class on next click在单击时添加类，然后在下次单击时按该类进行选择
【发布时间】：2013-05-28 01:02:33
【问题描述】：

我只是在做测试场景，试图更多地理解 jquery。我知道我正在尝试做的事情是行不通的，我相信我可以找到一个更复杂的解决方案，涉及切换或其他东西，但我想知道为什么这行不通背后的逻辑......

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

如果我的“textarea”下方有“textarea.text1”选择器（如我的示例所示），它可以理解地通过并添加 text1 类，然后找到它并立即输入“文本内容 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/

【问题讨论】：

标签： jquery class text click

【解决方案1】：

为什么你对单个按钮使用多个点击事件，你可以这样做

$('.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

【讨论】：

是的，但您的链接与我最初发布到我的 jfiddle 的链接相同：
jsfiddle.net/nlaffey/TkRD3 - 这是我复制和粘贴脚本的链接。

【解决方案2】：

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

$(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/

【讨论】：

是的，这就是我想要做的。这是使用单个按钮循环浏览多个文本值。我想我认为即使我是双重绑定也只有第一个函数会执行，因为只有它在点击时才合格（点击之前没有带有 .textarea.text1 的元素）。我希望这是有道理的，为什么我会感到困惑。我为我的无能深表歉意。