我正在嘗試使用輸入欄位中的 URL 切換背景影像。一個塊它可以作業，第二個它只有在我首先使用第一個塊時才有效，否則它會得到一個未定義的值。如何ImageUrl僅獲取每個塊的值？
jQuery($ => {
$(".Btn").click(function() {
jQuery(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" jQuery(".ImageUrl").val() "')");
});
});.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>uj5u.com熱心網友回復：
有很多方法可以遍歷 DOM 來實作這一點。這是一個。
請注意，我已將您的按鈕設為實際按鈕。這對于可訪問性（以及一般的良好語意）很重要。相應的樣式。如果您愿意，也可以申請aria-role="button"跨度。
jQuery($ => {
$(".switch button").click(function() {
const imgUrl = $(this).prev('input').val();
$(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" imgUrl "')");
});
});.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506180.html
標籤：javascript jQuery