每次我點擊任何 h5 標簽時，它總是插入第一個 h5，在下面的例子中是“首次試用”，如果點擊它，我需要列印其余的標簽，如果需要添加，帶有相同的類或 ID。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 class="trial" style="cursor: pointer;">First Trial</h5>
<h5 class="trial" style="cursor: pointer;">Second Trial</h5>
<h5 class="trial" style="cursor: pointer;">Third Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fourth Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fifth Trial</h5>
<h4 class="final"></h4>
<script>
$('.trial').click(function() {
$('.final').html($('.trial').html());
});
</script>uj5u.com熱心網友回復：
只是為了完整性，對于那些不想依賴 jQuery 或只想在 2021 年擺脫 jQuery 的人來說，這是一個簡單的 JavaScript 解決方案。
let elements = document.querySelectorAll('.trial'),
container = document.querySelector('.final');
elements.forEach(element => element.addEventListener('click', event => {
container.append(event.currentTarget.cloneNode(true));
}));<h5 class="trial" style="cursor: pointer;">First Trial</h5>
<h5 class="trial" style="cursor: pointer;">Second Trial</h5>
<h5 class="trial" style="cursor: pointer;">Third Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fourth Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fifth Trial</h5>
<h4 class="final"></h4>此代碼段為每個 h5.trial 元素添加了一個事件偵聽器。你應該避免這種情況。更好的做法：將單個事件偵聽器添加到包含要觀察的元素的父元素。
uj5u.com熱心網友回復：
您可以$(this)在事件處理程式中獲取具有 click by 的元素，然后克隆 clicked 元素并將其附加到.final元素，如下所示：
$('.trial').click(function() {
$('.final').append($(this).clone())
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 class="trial" style="cursor: pointer;">First Trial</h5>
<h5 class="trial" style="cursor: pointer;">Second Trial</h5>
<h5 class="trial" style="cursor: pointer;">Third Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fourth Trial</h5>
<h5 class="trial" style="cursor: pointer;">Fifth Trial</h5>
<h4 class="final"></h4>如果你想總是只顯示最后一個被點擊的元素，你可以像這樣改變你的腳本：
$('.trial').click(function() {
$('.final').html($(this).clone())
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380685.html
標籤：javascript 查询
上一篇：動態創建jQuery物件后為空