Question

我有一个svg地图，其中包含“g”attr上的id以及每个都有类的产品列表。单击地图上的某个部分时，将筛选与该部分类匹配的“g”元素上的ID的产品。

这是我的代码。

<g id="225" class="available">
      <polygon points=" 1302.4 446.2 1238.2 469.4 1310 530.1 1375.1 505.3 " class="i"></polygon>
    </g>

jQuery(document).ready(function($){
    $('g g').on('click', function (e) {
        e.preventDefault();
        var $svgelement = $(this);
        var id = $svgelement.attr('id');
        var $item = $('.Ticket');
        var $itemChild = $('div.product:first-child:contains('+id+')');

        $item.filter(function(e){

            if($(this).find($itemChild).length > 0){
                $(this).slideDown('fast');
            } else {
                $(this).slideUp('fast');
            }

        });
    });
});

<div class="Ticket">
<div class="first post-4490 product type-product status-publish product_cat-kentucky-derby-grandstand-tickets product_cat-kentucky-derby-tickets product_tag-section-225 pa_row-f taxable shipping-taxable purchasable product-type-simple product-cat-kentucky-derby-grandstand-tickets product-cat-kentucky-derby-tickets product-tag-section-225 instock">

    <div class="ticketSection col">
    <!--<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/">-->
<span class="Section">
    225<br>     <!--</a>-->
</span>

</div>

<div class="ticketRow col">
    <span class="rowNum">
    F<br>   </span>
</div>

<!--<div style="visibility: hidden; position: absolute;" class="ticketQty col">
    <span class="Qty">10</span>
</div>-->

<div class="ticketPrice Price col"><span style="display: none;"> data-value="475"&gt;</span>


    <span class="price"><span class="amount">$475.00</span></span>

<!--<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/" class="single_add_to_cart_button button alt">
View Details
</a>-->
</div>
<div class="orderOpen col">
    <!--<span class="qtyMsg">How many tickets?</span>-->



    <form class="cart" method="post" enctype="multipart/form-data">

        <div class="quantity_select" style="float:left; margin-right:10px;"><select name="quantity" title="Qty" class="qty"><option value="2">2</option><option value="4">4</option><option value="6">6</option></select></div>
        <input type="hidden" name="add-to-cart" value="4490">

        <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>

            </form>


    <div class="detailsLink">
<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/" class="alt">View Seating Details</a>
</div>
</div>
</div>
</div>

除了正在寻找兄弟姐妹之外，这个工作正常;使用问题：可能包含。

例如，单击地图上的第225部分，可以使用类名称中的第225部分正确过滤所有产品，但它也会显示价格为225的产品。所以它将显示322节，因为价格是1,225。

我尝试使用过滤器作为一个函数，接下来，：第一个孩子，最近，第一个和不同的组合：包含但没有任何作用。

我有什么想法可以解决这个问题吗？

更新！

这是一个jsfiddle - https://jsfiddle.net/k9uvqhxb/1/

Answer 1

我在.Ticket div中添加了一个类，它是产品术语的slug，所以g id是225而.Ticket有另一个叫225的类或者什么是slug

现在我只是简单地使用hasClass

jQuery(document).ready(function($){
    $('g g').on('click', function (e) {
        e.preventDefault();
        var $svgelement = $(this);
        var id = $svgelement.attr('id');
        var $item = $('.Ticket');

        $item.each(function(e){

            if($(this).hasClass(id)){
                $(this).slideDown('fast');
            } else {
                $(this).slideUp('fast');
            }

        return;

        });
    });
});

按预期工作

使用：contains或类似选择仅第一个元素

1 个答案: