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="">中添加一个类，其中data-place-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（）以及如何找到具有相同数据属性的其他元素，这样我可以为它分配一个类？

Answer 1

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

Answer 2

克里斯蒂安说得对，但它可能不需要那么复杂。怎么样？

$('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的数据位置id连接属性选择器相同。

Answer 4

这有效吗？

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

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

4 个答案: