將函數應用於當前點擊並移除其他點擊的功能

Question

嘗試將函數addDiv()應用於當前點擊的元素並且工作正常，但它不會在另一次點擊中刪除功能addDiv()。單擊文本時，addDiv（）函數應用於div標籤並添加了示例文本，但只需在當前點擊標籤時應用此addDiv（）函數。有人能幫我嗎？

這裏是鏈接：https://jsfiddle.net/a0L2jj1y/1/

HTML

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

JS

$(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 { 
      // I need to remove addDiv(); 
     } 
    }); 
}); 

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

我試着簡化你的方法。試試這個

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> 

Answer 3

我需要只適用於當前點擊標籤

要做到這一點這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>