Question

尝试将函数connectedReceive应用于当前单击的元素并且它工作正常，但它不会在另一次单击时删除函数addDiv()。单击文本时，addDiv（）函数将应用于div标记并添加示例文本，但只需对当前单击的标记应用此addDiv（）函数。有人能帮我吗？

以下是链接：https://jsfiddle.net/a0L2jj1y/1/

HTML

addDiv()

JS

<div>
    Tesing 1
</div>
<div>
    Tesing 2
</div>
<div>
    Tesing 3
</div>

Answer 1

尝试：

$(function(){

  function addDiv(){

  $('<div class="txt"/>').text('sample text added').appendTo('.clicked');

  }
  $(document).on('click', function(event){
  var clickedTag = event.target
  event.stopPropagation();
  $('.clicked').removeClass('clicked');

  if($(clickedTag).text().length >= 1){
  $(clickedTag).addClass('clicked');
  addDiv();

  } else {
  $(clickedTag).unbind();
  }

  });


});

Answer 2

我只需要对当前点击的标签
应用此addDiv（）函数

要完成此操作，您只需将当前事件目标传递给addDiv函数即可。所以它只会将文本追加到被点击的div。

$(function(){

    function addDiv(to){
      $('<div class="txt"/>').text('sample text added').appendTo(to);
    }

    $(document).on('click', 'div', function(event){
        event.stopPropagation()
        addDiv(event.target)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Tesing 1
</div>
<div>
    Tesing 2
</div>
<div>
    Tesing 3
</div>

Answer 3

我试图简化您的方法。试试这个

here is jsfiddle to play with

<style>
div{color:gray;}
div.clicked{color:red;}
</style>

<div id="one">Testing 1</div>
<div id="two">Testing 2</div>
<div id="three">Testing 3</div>

<script>
$('div').on('click', function(event){
    var id=$(this).attr('id');
    $(this).addClass('clicked');
    $(this).append('sample text added');
    $('div:not(#'+id+')').removeClass('clicked');
});
</script>

将功能应用于当前点击并删除其他点击功能

3 个答案: