Question

当我单击带有数据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”

任何帮助或建议都很好

先谢谢！

Answer 1

$('button[data-productid]').on('click', function () {
    $('#' + $(this).data().productid).hide();
});

希望有帮助！

Answer 2

$('.btn').on('click', function(){
   var dataID = $(this).attr('data-productid');
   $('.optionalExtrasBasket').find(dataID).css('display', 'none');
});

单击时获取数据ID，找到行进的父ID，不显示

2 个答案: