Question

我正在尝试制作一些在您单击时更改的文本，但如果再次单击它则会更改。它工作正常，一次。但如果我第二次尝试，没有任何反应。

我的HTML：

<div id="text">
    <p>TEXT1</p>
</div>

的JavaScript / jQuery的：

$(document).ready(function(){
    $("#text").click(function(){
        $(this).html("<p>TEXT2</p>").click(function(){
            $(this).html("<p>TEXT1</p>");
        });
        return false;
    });
});

实施例： http://mrkireko.github.io/jQueryExample/

Answer 1

这是因为在第一次点击后，您现在已经分配了两个处理程序，

第一个仍将TEXT2置于原位，但第二个将其更改回来。

一个正确的解决方案是使用.toggle()的处理程序版本：

$(document).ready(function(){
    $("#text").toggle(function(){
        $(this).html("<p>TEXT2</p>");
        return false;
    }, function(){
        $(this).html("<p>TEXT1</p>");
        return false;
    });
});

正如@KevinB所说，这个版本的.toggle()已被弃用。要进行自己的切换，您可以这样做：

$(document).ready(function() {
    $("#text").click(function(i){
        return function() {
            $(this).html(++i % 2 ? "<p>TEXT2</p>" : "<p>TEXT1</p>");
            return false;
        };
    }(0));
});

DEMO： http://jsfiddle.net/NkGZj/

Answer 2

我建议改为：

$('#text p').click(function(){
    $(this).text(function(i,t){
        return $.trim(t) === 'text1' ? 'text2' : 'text1';
    });
});

JS Fiddle demo

参考文献：

Answer 3

您将多个单击处理程序绑定到同一个元素，并且每次单击时它们都在执行。由于将文本更改为TEXT1的处理程序最后执行，这就是您最终的结果。

请在此处查看console.log()输出：

http://jsfiddle.net/tcMx5/

事件处理程序中的绑定事件处理程序几乎不是正确的事情。相反，有一个处理程序来检查当前状态并切换值。

Answer 4

这里有几个答案，有些会很好用。这是另一种选择，使用class：

<div id="text" class="state1">
  <p>TEXT1</p>
</div>

$(document).ready(function(){
  $("#text").click(function(){
    var $this = $(this);
    if ($this.hasClass('state1')) {
      $this.html('<p>TEXT2</p>');
    }
    else {
      $this.html('<p>TEXT1</p>');
    }
    $this.toggleClass('state1');
  });
});

我会更倾向于这个解决方案，因为它不依赖于元素中实际包含的内容。当然，除非你知道它永远不会改变，你可以可靠地定位字符串。

Answer 5

您可以这样做：

$( "#text" ).toggle(function() {
  this.html("<p>text 2</p>");
}, function() {
    this.html("<p>text 1</p>");
});

jQuery .click（）只工作一次

5 个答案: