javascript - 显示每个具有唯一 id 的 div

Question

我正在制作一个带有评论的照片库，但我被困在每张图像的评论按钮中。

html 结构类似于:

<form>
    <div>
        // some buttons - options
        <a id="show_' . $row['img_id'] . '" class="">Comment</a>
    </div>
    // the div hidding the comments section
    <div id="hide_' . $row['img_id'] . '" class=""></div>
</form>

单个 div 一切正常，但问题是在 foreach 打印图像内部，所以我不确定如何告诉(或在哪里)jscript 读取该 img_id。我正在使用 jquery 来切换 div:

在表单之前的代码中(仍在 foreach 中):

<script type="text/javascript">
    var img_id = ' . json_encode($img_id) . ';
</script>

和 javascript/jquery:

$(function() {  
    $('#show_'+img_id).on('click', function() {
        $('#hide_'+img_id).slideToggle('fast');
    });
});

工作正常，问题是只有最后一个 id 有效(只有最后一个图像的按钮显示评论部分)。

我很确定问题出在 javascript 变量上，因为只有最后一个有效。

提前致谢!

Answer 1

按以下方式使用html5数据属性并使用class选择器:

<a id="show_' . $row['img_id'] . '" data-id="' . $row['img_id'] . '" class="show">

在 jquery 中:

$(function() {  
    $('.show').on('click', function() {
        $('#hide_'+$(this).data("id")).slideToggle('fast');
    });
});

$(this).data("id") 将给出当前点击元素 data-id 属性值，并将其连接到 #hide_ 选择器隐藏相关元素。