jQuery - 添加元素并影响不同元素的 HTML答案

【问题标题】：jQuery - Adding elements and affecting the HTML of a different elementjQuery - 添加元素并影响不同元素的 HTML
【发布时间】：2014-11-07 06:58:56
【问题描述】：

每次在现有 HTML 中添加 div 元素时，是否可以更改 div 的 HTML？最终目标是，如果用户选择“添加”按钮，另一个 div 会计算已添加的 div 数量并在其他地方输入数字（理想情况下输入不同的 div）。

例如一个 div 应该显示添加元素的数量，基于用户的添加。如果用户删除元素，则该数字现在应该反映新的元素总数。

这种技术的最佳实践是什么？

jQuery：

var content = $('#contentElement');
var count = $('#contentElement .numberElement > span');

var addButton = $('#buttonElement.add');
var removeButton = $('#buttonElement.remove');

var block = $('#blockElement');
var newBlock = '<div id="blockElement"><span>Added Block</span></div>'
var lastBlock = $('#blockElement').last();

$('#blockElement').css('backgorund', 'purple');

count.html(0);

function addBlock() {
    $(newBlock).insertAfter($('#buttonContainer'));
}

addButton.on('click', function(event){
    addBlock();
});

function removeBlock() {
    var lastBlock = $('#blockElement').last();
    lastBlock.remove();
}

removeButton.on('click', function(event){
    removeBlock();
});

当前/实时版本位于jsFiddle。

这可能更好地帮助显示最终目标。

【问题讨论】：

您正在创建（并拥有）具有相同 ID 的元素。让创建的 div 具有相同的类，并让您的计数器计算具有该类的 div 的数量。

标签： jquery html css

【解决方案1】：

我已经使用您原来的 JSFiddle 完成了：

http://jsfiddle.net/02shzzz6/15/

var blockElementCount = $(".blockElement").length;
addButton.on('click', function(event){
    addBlock();
    blockElementCount++;
    updateCounter();
});
function updateCounter(){
    $(".numberElement > span").text(blockElementCount);
}

请注意，我也将其更改为使用类，因为您要插入具有相同 ID 的新元素。

【讨论】：

也许它只是我的浏览器，但这似乎破坏了删除按钮和一些 css。
抱歉，已经相应地修复了它。
Np。这可能比我的解决方案更干净，因为它直接从 DOM 中获取计数，而不是拥有一个与 DOM 没有真正联系的 JS 变量。
如果它解决了您的问题，请接受答案:)
我不是提出这个问题的人。我是发布其他解决方案的人。

【解决方案2】：

我将它移到了 codepen 中，因为我更喜欢它并评论了我的更改。查看 cmets 以了解我在哪里进行了更改。你只需要一个迭代器和 add 函数中的一些代码来重写这个数字。

count.html(elementCount);

http://codepen.io/supah_frank/pen/uzFve

【讨论】：