Question

我有两个html元素，我想通过单击一个来更改它。这是我的代码，它只能工作一次：

<div class="ic_lk"></div>
<?php $pic=0;?>
<script>
$('document').ready(function(){
    var pic= <?php echo $pic;?>;
if(pic==0) {
        $('.ic_lk').html('<img class="li_ik1" src="_pc/lk.png"></img>'); 
        }else if(pic>0){
        $('.ic_lk').html('<img class="li_ik2" src="_pc/lkm.png"></img>'); 
    }

$(".li_ik1").on("click",function(){
    $(this).replaceWith('<img class="li_ik2" src="_pc/lkm.png"/>');
    });
$(".li_ik2").on("click",function(){
    $(this).replaceWith('<img class="li_ik1" src="_pc/lk.png"/>');
    });
}); 
</script>

谢谢

Answer 1

您的侦听器仅在准备就绪的文档上设置，但是您的元素尚不存在。因此，您必须在添加元素之后添加侦听器：

$('document').ready(function() {
  var pic = 0; //<?php echo $pic;?>;
  if (pic == 0) {
    $('.ic_lk').html('<img class="li_ik1" src="https://picsum.photos/200/200?image=1" />');
    setPic1();
  } else if (pic > 0) {
    $('.ic_lk').html('<img class="li_ik2" src="https://picsum.photos/200/200?image=2" />');
    setPic2();
  }
});

function setPic1() {
  $(".li_ik1").on("click", function() {
    $(this).replaceWith('<img class="li_ik2" src="https://picsum.photos/200/200?image=2"/>');
    //
    setPic2();
  });
}

function setPic2() {
  $(".li_ik2").on("click", function() {
    $(this).replaceWith('<img class="li_ik1" src="https://picsum.photos/200/200?image=1"/>');
    //
    setPic1();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ic_lk"></div>
<?php $pic=0;?>

Answer 2

由于.li_ik2是动态的，这意味着在页面加载时它不在页面上，因此第二个绑定将不起作用。如here所述，您应该执行以下操作：

$(document).on("click", ".li_ik2", function(){

但是，当然，请检查您首先拥有哪个版本的JQuery。

jQuery-单击两个html元素之间切换

2 个答案: