当我单击带有数据ID的按钮时,我试图查找具有匹配ID的容器,但不显示任何内容。
这是我的HTML
<ul class="optionalExtrasBasket list-unstyled col-xs-12">
@foreach (var OEModel in Model.OptionalExtras)
{
foreach (var x in OEModel.ProductExtras)
{
<li class="col-xs-12 col-sm-6 col-md-4 border-bottom optional-extra-row">
<div class="optional-extra-thankyou text-center">
<div class="loaderBox"></div>
<div class="">@x.Title</div>
<b>Has been added to your basket</b>
</div>
<div id="@x.ProductID" class="optional-extra-container">
<div class="optionalExtrasImage float-left margin-right">
<a href="javascript:void(0);"><img class="img-responsive" src="@(@WebLocation.GetImageMedium(x.PrimaryImageUrl))" /></a>
</div>
<div class="optionalExtrasDetails float-right">
<div class="title">@x.Title</div>
<div class="price margin-top-half">@x.SalePrice.ToActiveCurrency()</div>
<div class="stock-avail">@x.StockAvailabilityState</div>
</div>
<div style="display: inline-block; width: 100%;" class="margin-top">
<div class="form-group">
<input type="hidden" class="directProduct" id="directProduct" name="directProduct" value="@x.ProductID" />
<label for="product" class="visible-xs">Button</label>
<button style="width: 100%;" type="button" class="btn btn-secondary btn-block js-buynow" data-href="/ajax/AddToBasket?p=@x.ProductID" value="Add to Basket" data-text="Add to Basket" data-productid="@x.ProductID" title="Add to basket" data-toggle="tooltip" data-placement="bottom">Add to Basket</button>
</div>
</div>
</div>
</li>
}
}
<!-- END LI -->
</ul>
其上方的HTML按钮中的按钮具有data-productid =“ @ x.ProductID”,父容器具有id =“ @ x.ProductId”
任何帮助或建议都很好
先谢谢!
答案 0 :(得分:0)
$('button[data-productid]').on('click', function () {
$('#' + $(this).data().productid).hide();
});
希望有帮助!
答案 1 :(得分:0)
$('.btn').on('click', function(){
var dataID = $(this).attr('data-productid');
$('.optionalExtrasBasket').find(dataID).css('display', 'none');
});