我正在嘗試從 Bootstrap 4 框架轉到 Bootstrap 5 框架——這意味著遠離 jQuery。
我在一個頁面上有幾個元素，所有元素都帶有類名 .info-box 和一個屬性，如下所示
<div class="card card-icon col-md-4 info-box" data-href="file.php?e=AA">
<div data-href="file.php?e=BB">
<div data-href="file.php?e=CC">
當用戶點擊卡片元素時，意圖是打開鏈接。以下 JS 接近，但它將所有三個卡片元素鏈接到 Last Link (=CC)
var elements = document.getElementsByClassName('info-box');
for(var i = 0; i < elements.length; i ) {
var element = elements[i];
var newLoc= elements[i].getAttribute('data-href');
element.onclick = function() {window.location = newLoc;}
}
您能否建議一種將正確的 data-href 屬性鏈接到正確卡的方法？
uj5u.com熱心網友回復：
我想我找到了解決方案..這看起來有效嗎？
<script>
var elements = document.getElementsByClassName('info-box');
[].forEach.call(elements, function(elements) {
elements.onclick = function() {
var newLoc= this.getAttribute('data-href');
window.location = newLoc;
}
})
</script>
在這里找到它.. javascript：按類名呼叫函式
uj5u.com熱心網友回復：
var elements = document.getElementsByClassName('info-box');
for(let i = 0; i < elements.length; i ) {
let element = elements[i];
let newLoc= elements[i].getAttribute('data-href');
element.onclick = function() {window.location = newLoc;}
}
使用 let 代替 var。
uj5u.com熱心網友回復：
問題是var沒有塊范圍，這意味著在您的情況下，變數newLoc是全域定義的。使用let而不是var.
我想我找到了解決方案..這看起來有效嗎？
您的解決方案也應該可以正常作業，因為它將 包裝var newLoc在一個函式中，這限制了它的范圍。不過，使用let通常是一種很好的做法。
uj5u.com熱心網友回復：
我敢肯定，您不只是為此使用鏈接是有充分理由的。但無論如何我都會說。這看起來像是 Links 的一個案例。
其次 div 不應該是可點擊的。如果點擊在頁面上進行互動，它應該是一個按鈕，如果它指向另一個頁面，它應該是一個標簽。您的 div 標簽也沒有關閉</div>。
最后，還有更有效和更清潔的方法來迭代元素。現在已經不是 2006 年了。貝婁應該適合你。
Ps innerhtml 位純粹是為了顯示在代碼片段上，所以你可以看到它。
document.querySelectorAll('.info-box').forEach(function(infoBox) {
let newLoc = infoBox.getAttribute('data-href');
infoBox.innerHTML = newLoc;
infoBox.onclick = function() {
window.location = newLoc;
};
});<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=AA"></button>
<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=BB"></button>
<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=CC"></button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405658.html
標籤：