Question

我在同一页面上有多个块，其中包含＆＃34;卡片＆＃34;其中一些块不可见，当我点击它们将显示的showmore时。如何为每个元素隔离相同的脚本？这是我的代码： - HTML

<div class="container_block">
<div class="card_container">
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="showmore_cards">show more</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
</div>

<div class="container_block">
<div class="card_container">
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="showmore_cards">show more</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
</div>

JQUERY

$('.showmore_cards').click(function() {
    var thisItem = $(this);
    $(this).parents('.card_container').find('.single_card').each(function(index) {
        if ($(this).hasClass('card_visible')) {
            $(this).show();
        }
        thisItem.hide();
    });
});

现在，当我点击showmore按钮时，会显示页面中的所有卡片

如何为页面中的每个元素隔离相同的脚本 - jquery

0 个答案: