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

【问题标题】：Click reinserts looped elements twice单击两次重新插入循环元素
【发布时间】：2015-08-16 08:06:37
【问题描述】：

我的代码在单击“生成”后，会从文本区域获取单词、循环并按照我需要的方式连接。一切正常，一切正常。

但是

如果我按“清除”并再次单击“生成”，我的代码会插入循环单词两次。

问题：如何每次点击“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();
    });

});

【问题讨论】：

尝试在produce函数开头设置endString = "";
3 个人在 10 秒内回答同样的问题哈哈
这就是为什么 stackoverflow 不会停止让我惊讶:)。杰里米先进来，我会尽快接受。 :)
那么我是否正确理解我的字符串作为一个全局变量会随着每个事件的触发而被“填满”？

标签： javascript jquery loops concatenation

【解决方案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();
    });

});

【讨论】：

或在 $('#produce').click 中声明 var endstring 而不是你的 document.ready

【解决方案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();
    });

});

【讨论】：