1

我只是在做测试场景，试图更多地理解 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/

4

2 回答 2

2

Why you are using multiple click events for single button, you can do this

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

see here Fiddler code

于 2013-06-01T07:44:10.683 回答
0

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

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

于 2013-06-01T08:03:39.610 回答