jQuery 单击字符串，添加或删除文本区域内匹配的文本

Question

我在 <ul> 标签内有一个单词列表，当用户单击 <li> 元素时，我试图在文本区域内添加来自该 li 的单词。该词已正确添加，但如果用户单击相同的 <li> 元素，我将尝试从文本区域中删除该词。

   <ul>
       <li>Word One</li>
       <li>Word deux</li>
       <li>Other Word three</li>
       <li>yet another Word 4</li>
   </ul>

   <textarea id="list" rows="4" cols="20"></textarea>

jQuery

jQuery(document).ready(function() {

// removing the textarea value when window is loaded again
// otherwise for some reason all the values entered before are still there ?

jQuery(window).load(function() {
    jQuery('#list').val('');  
})

jQuery('ul li').click(function(addWord) {

    var choice = jQuery.trim($(this).text());
    var textArea = jQuery("#list");

    // if the <li> with the word was allready clicked, then remove its "selected" class
    if (jQuery(this).hasClass('selected')) {
        jQuery(this).removeClass('selected');

        //textArea.replace(choice,'');

   } else {
       // add class selected to the clicked <li> word, add the word to the textarea
       jQuery(this).addClass('selected');
       textArea.val(textArea.val() + choice + ' , ').text(textArea.val());
   }
});
}

Answer 1

您需要在删除时替换文本 selected class。这里使用.val(function)。

jQuery(document).ready(function() {

  jQuery('ul li').click(function(addWord) {

    var choice = jQuery.trim($(this).text());
    var textArea = jQuery("#list");

    // if the <li> with the word was allready clicked, then remove its "selected" class
    if (jQuery(this).hasClass('selected')) {
      jQuery(this).removeClass('selected');

      textArea.val(function(_, val) {
        return val.replace(choice + ' , ', '');
      });
    } else {
      // add class selected to the clicked <li> word, add the word to the textarea
      jQuery(this).addClass('selected');
      textArea.val(function(_, val) {
        return val + choice + ' , ';
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Word One</li>
  <li>Word deux</li>
  <li>Other Word three</li>
  <li>yet another Word 4</li>
</ul>

<textarea id="list" rows="4" cols="20"></textarea>

jQuery 单击字符串，添加或删除文本区域内匹配的文本

jQuery on string click, add or remove text matched within textarea

html

javascript

jquery

replace

textarea