使用动态添加的数据属性将类添加到元素

Question

好的，所以我有一个HTML文件，看起来像这样：

while($stuff = $junk->fetch()){ ?>
    <div class="top-div" data-place-id="<?php echo $place['id']; ?>"></div>
    <div>
        <article>
            <div>
                //some stuff
            </div>
            <div>
                <span class="expand" data-place-id="<?php echo $place['id']; ?>"></span>
            </div>
        </article>
    </div>
} ?>

如您所见，对于数据库的每个结果，都将输出这样的结构。 自然，每次至少要有几个。 我想使它这样，使每个时间span被点击时，一类被添加到<div data-place-id="">其中数据就地-id为相同点击的元素。

我尝试这样做：

expandOverlay = function(){
    $(".expand").each(function(){
        $(".top-div").addClass('is-expanded');
    })
})

但是，这只会将该类添加到该类的每个元素中。 然后我尝试了这个：

expandOverlay = function(){
    $(".expand").each('click', function(){
        var dataAttr = $(this).data();
        if($(".place-overlay").data() == dataAttr){
             $(this).addClass("is-expanded);
        }
    })
});

但这也不起作用。

因此，如何从单击的元素中获取.data（）以及如何查找具有相同data属性的其他元素，以便可以为其分配一个类？

Answer 1

$('span.expand').click(function() {
    $('div[data-place-id="' + $(this).data('place-id') + '"]').addClass('is-expanded');
});

Answer 2

克里斯蒂安（Cristian）拥有正确的权利，但可能不必那么复杂。 这个怎么样？

$('span.expand').click(function() {
    $(this).closest('div[data-place-id]').addClass('is-expanded');
});

data-place-id值是多少，没关系吗？

Answer 3

尝试这个，

   $('.expand').click(function(){

  dataid = $(this).data('place-id');
   $('div[data-place-id="'+dataid+'"]').addClass('is-expanded');
   })

• 首先获取点击项的数据属性
• 进行div选择，其中data-place-id与span的data-place id ny并置属性选择器。

Answer 4

这有效吗？

$('span.expand').click(function() {
    $(this).closest('div.top-div').addClass('is-expanded');
});