Question

HTML：

$(document).on('click', '.Addtocart button', function(event){
    alert($(this).closest('.shopping_cart').data('item'));
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
    <div class="products">
        <div class="product">
            <div class="product-image image_slider">
                <div class="image">
                    <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
                        <div style="position: absolute;bottom:97px; right:0px">
                            <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
                        </div>
                    </a>
                </div>
            </div>
            <div class="product-info text-left">
                <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3>
                <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
            <div class="product-cart text-left">
                <div class="row">
                    <div class="col-md-12 Addtocart">
                        <div style="width:40%;float: left;">
                            <select>
                                <option value="11" data-unit_value="1">Pc</option>
                            </select>
                        </div>
                        <div style="width:40%;float: left;">
                            <input type="text" placeholder="Quantity"> </div>
                        <div style="width:20%;float: left;">
                            <button class="btn btn-primary icon transparent" type="button"> OK </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

大家好，您可以看到我在用户点击类shopping_cart中的Addtocart按钮时查找数据项值，但显示未定义。我该如何解决这个问题？为什么找到元素。

Answer 1

根据您的标记，您需要进一步升级至>>> import calendar >>> calendar.month_name[3] 'March'课程，然后查找其.product

shopping_cart

<强>演示

alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));

$(document).on('click', '.Addtocart button', function(event){
    alert($(this).closest('.product').find(".shopping_cart").data('item'));
})

Answer 2

试试这个：

$(document).on('click', '.Addtocart button', function(event) {
    alert($(this).closest('.product').find('.shopping_cart').data('item'));
});

这将有效!!!

Answer 3

解决方案：

$(document).on('click', '.Addtocart button', function(event){
    alert($(this).parents().find('.shopping_cart').data('item'));
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
    <div class="products">
        <div class="product">
            <div class="product-image image_slider">
                <div class="image">
                    <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
                        <div style="position: absolute;bottom:97px; right:0px">
                            <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
                        </div>
                    </a>
                </div>
            </div>
            <div class="product-info text-left">
                <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3>
                <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
            <div class="product-cart text-left">
                <div class="row">
                    <div class="col-md-12 Addtocart">
                        <div style="width:40%;float: left;">
                            <select>
                                <option value="11" data-unit_value="1">Pc</option>
                            </select>
                        </div>
                        <div style="width:40%;float: left;">
                            <input type="text" placeholder="Quantity"> </div>
                        <div style="width:20%;float: left;">
                            <button class="btn btn-primary icon transparent" type="button"> OK </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery查找最近的元素不起作用

3 个答案: