我的 HTML 中有多個帶有示例類名稱的 div，我希望這些 div 的行為類似于單選按鈕，即當單擊/選擇 div 時，我想實作以下操作。1：更改選定的 div 背景顏色 2：從選定 div 內的不同元素中獲取值并將值保存在變數中。我可以更改顏色，但無法從所選 div 中獲取唯一值。這是HTML
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="5" />
<p class="small">Deep</p>
<h4 class="packageTitle">Deep Cleaning</h4>
<p>All-inclusive cleaning service</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="4" />
<p class="small">Last Minute</p>
<h4 class="packageTitle">Last-Minute Cleaning</h4>
<p>Last minute & after party cleaning</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">43.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="3" />
<p class="small">Moving</p>
<h4 class="packageTitle">Move-In-Out Cleaning</h4>
<p>For move-ins, and move-outs</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
這里是腳本
var packageId = "";
var packageTitle = "";
var packagePrice = "";
var packages = document.getElementsByClassName('package');
Array.prototype.forEach.call(packages, function (element) {
element.addEventListener('click', function () {
$('.package').css("background-color", "#FFFFFF");
$(this).css("background-color", "#FCF6CC");
packageId = $('.packageId').attr('value');
packageTitle = $('.packageTitle').text();
packagePrice = $('packagePrice').text();
console.log(packageId);
console.log(packageTitle);
console.log(packagePrice);
});
});
uj5u.com熱心網友回復：
您沒有獲得唯一值的原因是因為您按類使用 get element ，
IE packagePrice = $('.packagePrice').text();
并且有 3 個具有相同類名的元素，以解決此問題
const elem = $(this);
packagePrice = elem.find('.packagePrice').text();
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/485829.html
標籤：javascript html jQuery
上一篇：CSS將兩個div并排放置