从不同的id获取内部HTML

Getting inner HTML from different ids

本文关键字：获取 内部 HTML id      更新时间：2023-09-26

我刚刚开始尝试学习Javascript，所以请耐心等待。我正试图通过点击按钮将信息从页面一部分的列表中获取到一个新的部分，该部分有三个位置。

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

我试着创建了一个脚本来增加I，并将段落的id放入一个函数中，但我似乎无法使其工作。我希望通过"计数"按钮的点击次数，它会将添加的每个新列表项放在新部分的下一个位置。

不过，我不知道如何使计数部分工作，我刚刚想到，也许我函数的第一部分一直保持在零。

我真的很感激能在这方面得到任何帮助。

提前感谢！

这是我的代码：

<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>

试试这个脚本：

<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>

下面是的运行示例

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

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

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

例如。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/

相关文章：