Question

我刚刚开始尝试学习Javascript，所以请耐心等待。我尝试从页面的一个部分列表中获取信息到一个新部分，只需点击一个按钮即可获得三个部分。

列表中的每个项目都有自己的按钮，我需要我的脚本根据按钮被点击的次数知道放置列表项目的位置（这应该与已经有多少列表项目一致）添加到列表中）。

我尝试创建了一个脚本来增加i并将段落的id转换为函数，但我似乎无法使其工作。我希望通过＆＃34;计数＆＃34;单击按钮的次数，它将把新添加的列表项放在新部分的下一个位置。

我不知道如何使计数部分工作，而且我刚刚想到，我的功能的第一部分可能始终保持为零。

我真的很感激我能得到的任何帮助。

提前致谢！

这是我的代码：

<script>    
    function increase(place) {
    var i = 0;
    addToDilly(i, place);
    i++;
}

function addToDilly(num, place) {
    if num = 0 {
        document.getElementById("firstStop").innerHTML = document.getElementById(place).innerHTML;
    }
    if num = 1 {
        document.getElementById("secondStop").innerHTML = document.getElementById(place).innerHTML;
    }
    if num = 2 {
        document.getElementById("thirdStop").innerHTML = document.getElementById(place).innerHTML;
    }
}
</script>

<p id="firstStop">This is a paragraph.</p> 
<p id="secondStop">This is another paragraph.</p>
<p id="thirdStop">This is another paragraph.</p>
<hr/>
<p id="1">Royal Oak <button onclick="increase(1)">Add To Dilly</button></p> 
<p id="2">Ferndale <button onclick="increase(2)">Add To Dilly</button></p>
<p id="3">Chesterfield <button onclick="increase(3)">Add To Dilly</button></p>

Answer 1

我建议完全重写。如果您的目标是更新项目列表，只需更新项目列表（字面意思）：）

注意：您最初将问题标记为jQuery，因此这个初始答案是在jQuery中。

您要添加的文本需要位于与按钮相关的元素中，但不包含按钮本身。在这个例子中，我将它们放在按钮之前。

e.g。 http://jsfiddle.net/TrueBlueAussie/t13h54bu/3/

$('button').click(function () {
    var $button = $(this);
    var text = $button.prev('p').html();
    var $target = $('#list');
    $target.append($('<li>').html(text));
});

更简单的HTML：

<ul id="list"></ul>
<hr/>
<p>Royal Oak</p>
<button>Add To Dilly</button>
<p>Ferndale</p>
<button>Add To Dilly</button>
<p>Chesterfield</p>
<button>Add To Dilly</button>

然后，如果您想将项目限制为3，请添加以下内容：

if ($target.children().length < 3) {
    $target.append($('<li>').html(text));
}

http://jsfiddle.net/TrueBlueAussie/t13h54bu/4/

Answer 2

试试这个脚本：

<script>
    var i = 0;

    function increase(place) {
        console.log(place);
        addToDilly(i, place);
        i++;
    }

    function addToDilly(num, place) {
        if (num == 0) {
            document.getElementById("firstStop").innerHTML = document.getElementById(place).innerHTML;
        }
        if (num == 1) {
            document.getElementById("secondStop").innerHTML = document.getElementById(place).innerHTML;
        }
        if (num == 2) {
            document.getElementById("thirdStop").innerHTML = document.getElementById(place).innerHTML;
        }
    }
</script>

这是running example

从不同的ID获取内部HTML

2 个答案: