Question

我是一个网页，我只有一个div

<div id="example">codehtml1</div>

如果<div id="example">的内容是codehtml1，则点击此网页中的按钮我希望更改codehtml2中的内容，如果<div id="example">的内容是codehtml2我想要更改codehtml1

这就是我的尝试：

<div id="example">
    codehtml1</div>
<button class="test">click to change</button>

$(document).ready(function() {
    $('.test').click(function() {                           
        var lookcontent2 = 'codehtml2';        
        $('#example').html(lookcontent2);        
    });
});

有任何帮助吗？感谢

Answer 1

只需添加if语句：

$(document).ready(function() {
    var lookcontent2 = 'codehtml2';
    var lookcontent1 = 'codehtml1';
    $('.test').click(function() {                           
      if ($('#example').html() == lookcontent1) {
        $('#example').html(lookcontent2); 
      }
      if ($('#example').html() == lookcontent2) {
        $('#example').html(lookcontent1); 
      }
    });
});

Answer 2

基本上，您需要获取#example div的文本，并使用if条件匹配以下代码的文本，请尝试以下代码：

$(document).ready(function() {
 $('.test').click(function() { 
    var content = $('#example').text();
    if(content=="codehtml2")
    {
        $('#example').text('codehtml1');
    }
    else
    {
        $('#example').text('codehtml2');
    }       
 });
});

Answer 3

基本上你可以设置一个条件来检查并在两者之间切换：DEMO

$('.test').click(function(){    
    var lookcontent1 = 'codehtml1';
    var lookcontent2 = 'codehtml2';        
    if($('#example').html() == lookcontent1){
        $('#example').html(lookcontent2);      
    } else {
        $('#example').html(lookcontent1);      
    }   
});

Answer 4

您可以拥有两个可见的元素，而不是更改内容，只需切换它们即可。这样您就不需要将内容保留在JavaScript代码中：

＆＃13;

$(document).ready(function() {
    $('.test').click(function() {
        $('#example1,#example2').toggle();        
    });
});

＆＃13;

<div id="example1">codehtml1</div>
<div id="example2" style="display:none">codehtml2</div>
<button class="test">click to change</button>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

＆＃13;

Answer 5

我希望跟踪状态而不是对div内容进行字符串压缩。

<div id="example">
codehtml1</div>
<button class="test">click to change</button>

$(document).ready(function() {
  $('.test').click((function (currentState) { 
    return function() {                           
      var lookcontent2 = 'codehtml2';
      var lookcontent1 = 'sometstuff';
      if (currentState = 1) {
        currentState = 2;
        $('#example').html(lookcontent2);
      } else {
        currentState = 1;
        $('#example').html(lookcontent1);
      }        
    });
  })(1)
});

用其他内容替换div的内容

5 个答案: