jQuery - 添加元素並影響不同元素的HTML

每次在現有HTML中添加div元素時，是否可以更改div的HTML？最終目標是如果用戶選擇「添加」按鈕，則另一個div將計算添加了多少個div，並在其他位置輸入數字（理想情況下放入不同的div）。jQuery - 添加元素並影響不同元素的HTML

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

這可能會更好地幫助顯示最終目標。

來源

2014-11-06 Andrew

您正在創建（並具有）具有相同ID的元素。讓創建的div具有相同的類，並讓您的計數器計算該類的div數。 – kei 2014-11-06 22:42:45

我一直在使用你原來的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。

來源

2014-11-06 22:48:51 TysonWolker

也許這只是我的瀏覽器，但這似乎已經打破了刪除按鈕和一點點的CSS。 – AndrewTet 2014-11-06 22:53:47

對不起，有相應的解決辦法。 – TysonWolker 2014-11-06 22:59:13

Np。這可能是比我更清潔的解決方案，因爲它直接從DOM獲取計數，而不是具有與DOM無關的JS變量。 – AndrewTet 2014-11-06 23:02:20

我將它轉換爲codepen，因爲我更喜歡它，並評論了我的更改。看看評論，看看我做了哪些改變。所有你需要的是迭代器和add函數中的一些代碼來重寫這樣的數字。

count.html(elementCount);

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

來源

2014-11-06 22:44:55 AndrewTet

jQuery - 添加元素並影響不同元素的HTML

回答

相關問題