Question

我有一些复选框列表项文本需要在textarea中添加和删除，因为用户选择并取消选择列表项复选框。

它第一次工作，即选择一个复选框将列表项文本添加到textarea，对于所有列表项，然后取消选中复选框，成功删除textarea中的相应列表项文本。

但是当取消选中后再次单击任何复选框时，文本不会重新附加到textarea，当我需要它来进行无限选择和取消选择列表项时。

我认为这与我如何使用替换删除相应列表项的字符串有关。以某种方式阻止附加工作第二/第三/等时间。或者，也许它与val（）和append（）不能一起玩得很好。我已经做了很多寻找答案，并试用了我的脚本，但我只是在这一点上感到困惑。

简而言之，我在用户点击后成功切换了这些列表项的类，我基本上也需要将每个列表项的文本切换到附近的textarea。文本“切换”目前只能打开和关闭一次，但不会再打开。

以下是我的简单HTML代码：

    <div class="textwrapper">

                    <p>Check off the questions you will be answering.</p>

                    <ul>
                        <li title="select question">What was your biggest takeaway from this?</li>

                        <li title="select question">What part of this struck you the most?</li>

                        <li title="select question">What part do you want to know more about?</li>
                    </ul>

                </div>

                <div id="topic-form">
                    <textarea></textarea>
                </div>

在该代码中没有看到CSS使得看起来像复选框的背景图像从未选择状态交换到选定状态，因为相应地向每个列表项添加或删除“选定”类。这一点工作得很好。

这是我的JS：

    $('.textwrapper li').click(function() {

        questionText = $(this).text() + '\n\n';

        currTextareaText = $('#topic-form textarea').val();

        if ($(this).hasClass('selected')) {
            newTextareaText = currTextareaText.replace(questionText, '');
            $('#topic-form textarea').val(newTextareaText);
        } else {
                //$('#topic-form textarea').val(questionText);
                $('#topic-form textarea').append(questionText);
            }
        }

        questionTitle = $(this).attr('title');
        if (questionTitle == 'select question'){
            $(this).attr({'title':'deselect question'});    
        } else {
            $(this).attr({'title':'select question'});
        }

        $(this).toggleClass('selected');

    });

Answer 1

您可以将$('#topic-form textarea').append(questionText);更改为$('#topic-form textarea').val($('#topic-form textarea').val() + questionText);，这样就可以了。

 $('.textwrapper li').click(function() {
     questionText = $(this).text() + '\n\n';
     currTextareaText = $('#topic-form textarea').val();

     if ($(this).hasClass('selected')) {
         newTextareaText = currTextareaText.replace(questionText, '');
     } else {
         newTextareaText = currTextareaText + questionText;
     }
      $('#topic-form textarea').val(newTextareaText);

     questionTitle = $(this).attr('title');
     if (questionTitle == 'select question'){
         $(this).attr({'title':'deselect question'});    
     } else {
         $(this).attr({'title':'select question'});
     }

     $(this).toggleClass('selected');
 });

请在此处查看jsfiddle：http://jsfiddle.net/nrobert/jsB5n/3/

在textarea中使用replace后，jquery追加不起作用

1 个答案: