单击重新插入循环元素两次

Question

我的代码在单击 "produce" 后，从文本区域获取单词、循环并按照我需要的方式连接起来。一切都很好，一切正常。

但是

如果我按 "Clear" 并再次单击 "produce"，我的代码会插入两次循环词。

问题：如何每次点击都得到相同的结果"produce"？

HTML:

<textarea id="KWarea" rows="4" cols="50">*casio*
    *citizen*
    *clarks*
    </textarea>
<br>
<button id="produce">produce</button>
<button id="clear">clear</button>
<br />
<br />
<div id="result"></div>
<br />
<br />
<br />
<div id="result">
    Expected result example:
        <br />
    ("*casio*","* casio *", "*citizen*", "* citizen *", "*clarks*", "* clarks *")
</div>

jQuery:

$(document).ready(function () {
    var endString = "";
    $('#produce').click(function () {
        var myTxtArea = document.getElementById('KWarea');
        myTxtArea.value = myTxtArea.value.replace(/^\s*|\s*$/g, '');

        var lines = $('#KWarea').val().replace(/\*/g, '').split('\n');
        for (var i = 0; i < lines.length; ++i) {
            endString += '"*' + lines[i] + '*"' + ',' + '"* ' + lines[i] + ' *"' + ',';
          //   console.log(lines[i]);
        }
        var trimmedStr = endString.slice(0, -1);
        $('#result').html("Here is the final string:( " + trimmedStr + ")");

    });

    $('#clear').click(function () {
        $('#result').empty();
    });

});

Answer 1

您没有先清空就附加了字符串，试试这个：

$(document).ready(function () {
    var endString = "";
    $('#produce').click(function () {
        var myTxtArea = document.getElementById('KWarea');
        myTxtArea.value = myTxtArea.value.replace(/^\s*|\s*$/g, '');

        var lines = $('#KWarea').val().replace(/\*/g, '').split('\n');
        endString ='';
        for (var i = 0; i < lines.length; ++i) {
            endString += '"*' + lines[i] + '*"' + ',' + '"* ' + lines[i] + ' *"' + ',';
          //   console.log(lines[i]);
        }
        var trimmedStr = endString.slice(0, -1);
        $('#result').html("Here is the final string:( " + trimmedStr + ")");

    });

    $('#clear').click(function () {
        $('#result').empty();
    });

});

Answer 2

发生这种情况的原因是因为您将 endString 作为全局变量。解决这个问题 var endString = ""; $('#produce').click(function () {

里面

喜欢

$(document).ready(function () {

    $('#produce').click(function () {
            var endString = "";
        var myTxtArea = document.getElementById('KWarea');
        myTxtArea.value = myTxtArea.value.replace(/^\s*|\s*$/g, '');

        var lines = $('#KWarea').val().replace(/\*/g, '').split('\n');
        for (var i = 0; i < lines.length; ++i) {
            endString += '"*' + lines[i] + '*"' + ',' + '"* ' + lines[i] + ' *"' + ',';
          //   console.log(lines[i]);
        }
        var trimmedStr = endString.slice(0, -1);
        $('#result').html("Here is the final string:( " + trimmedStr + ")");

    });

    $('#clear').click(function () {
        $('#result').empty();
    });

});

单击重新插入循环元素两次

Click reinserts looped elements twice

javascript

jquery

loops

concatenation