我有一个带有下拉菜单的表单，其中包含食品名称，另一个带有输入字段，允许用户输入价格。在此之下，我还有另一个下拉列表，class="IfNotAvailableSelectable"其中包含3个选项，值分别为0,1,2。我有一个名为“ addMore”的按钮，可使用以下命令在div中克隆所有内容class="divContainer"
以下是我要实现的目标：
1.当用户单击“ addmore”按钮时，它应该克隆div中的所有内容class="divContainer"，并将其附加到div上class="addMoreContent".，我已经可以成功地将其完成。
2.当用户选择class="IfNotAvailableSelectable"且值= = 0的下拉列表时，显示div带有class =“ thenBuy”，否则应将其隐藏。现在面临的问题是，每当我单击addmore按钮并选择选项值为1或0或2的下拉菜单时，原始克隆的div也会随之变化，
因此，例如：如果我选择值1，我希望divclass="thenBuy"可以隐藏，但是在addmore按钮上并选择value = 0的下拉菜单时，它也会在第一个中显示class =“ thenBuy”的div，虽然我不想要它。请帮助，或者是否有更好的解决方案。将不胜感激。谢谢HTML：
$(document).ready(function () {
//clone
var divContainer = $(".divContainer");
var addMoreContent = $(".addMoreContent");
var addMoreBtn = $(".addMoreBtn");
var removeItem = $(".removeItem");
addMoreBtn.click(function () {
divContainer.clone(true).appendTo(addMoreContent);
});
removeItem.click(function (e) {
$(this).closest('div').remove();
e.preventDefault();
});
//then buy functionO(when user selects "buy alternative")
$(document).on('change', '.IfNotAvailableSelectable', function () {
console.log($(this).val())
var MainNav = $(this).val();
if (MainNav == 0) {
$(".thenBuy").show();
} else {
$(".thenBuy").hide();
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
<!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
<span>×</span>
</button>
<!-- items -->
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
<div >
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
<br>
<!-- if item is not available -->
<div style="font-size: medium;" >
<select class="custom-select text-capitalize IfNotAvailableSelectable">
<option value="0" >If item is not available</option>
<option value="1" >Remove it from my order </option>
<option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy" >
<div>
<span>Then Buy</span>
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
<div >
<span>Price</span>
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
</div>
</div>
<!-- end of card body -->
</div>
<br>
<div class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button>
<br>随着$(".thenBuy")您选择所有使用类名称的元素thenBuy，你需要使用.parent().find(".thenBuy")
.IfNotAvailableSelectable在克隆使用后让新的更改生效.IfNotAvailableSelectable
$(document).ready(function () {
//clone
var divContainer = $(".divContainer"),
addMoreContent = $(".addMoreContent"),
addMoreBtn = $(".addMoreBtn"),
removeItem = $(".removeItem");
addMoreBtn.click(function () {
divContainer.clone(true).appendTo(addMoreContent);
addMoreContent.find(".IfNotAvailableSelectable").last().change(); //<<<<<<<<<< trigger the change event for the last/new IfNotAvailableSelectable
});
removeItem.click(function (e) {
$(this).closest('div').remove();
e.preventDefault();
});
//then buy functionO(when user selects "buy alternative")
$(document).on('change', '.IfNotAvailableSelectable', function () {
console.log($(this).val())
var ThisSelect = $(this); // define this
var MainNav = ThisSelect.val(); // get this val
if (MainNav == 0) {
ThisSelect.parent().find(".thenBuy").show(); // use .parent().find
} else {
ThisSelect.parent().find(".thenBuy").hide(); // use .parent().find
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
<!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
<span>×</span>
</button>
<!-- items -->
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
<div >
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
<br>
<!-- if item is not available -->
<div style="font-size: medium;" >
<select class="custom-select text-capitalize IfNotAvailableSelectable">
<option value="0" >If item is not available</option>
<option value="1" >Remove it from my order </option>
<option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy" >
<div>
<span>Then Buy</span>
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
<div >
<span>Price</span>
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
</div>
</div>
<!-- end of card body -->
</div>
<br>
<div class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button>
<br>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句