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数据属性并按以下方式使用类选择器：

<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")会提供当前点击的elemtent data-id 属性值，并在 #hide _ 选择器中连接它以隐藏相关元素。

Answer 2

为您的链接添加一个类，以及一个值为image id的data-id属性。当您单击按钮时，获取单击的按钮data-id值，现在您可以知道要显示的图像。

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

然后

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

Answer 3

您应该使用类作为触发器。这样，您可以拥有相同类的无限元素，并在自定义html属性中添加id。

例如，您有多个按钮：

<a class="image_action" image_id="1">Just</a>
<a class="image_action" image_id="2">Some</a>
<a class="image_action" image_id="3">Text</a>

然后使用class＆＃34; image_action＆＃34;为每个元素创建一个全局onClick触发器。并使用$（this）来获取实际ID：

$(".image_action").on("click", function() {
    var targetID = $(this).attr("image_id");
    if(targetID > 0) {
        $('#image_' + targetID).slideToggle('fast');
    }
});

我的示例与您的代码不同，但我认为您理解我的意思。

Answer 4

那是因为页面加载后img_id会被foreach中的下一个值覆盖，因此只会给出最后一个值。

为什么不使用class而是横向于相应的评论＆{39} div，如此：

HTML：

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

jQuery的：

$(function() {  
    $('.showIt').on('click', function() {
        $(this).parent().siblings('.comment').slideToggle('fast');
    });
});

Answer 5

我会在标记中添加一个类，然后使用$(this)。

例如;

PHP

<a id="show_' . $row['img_id'] . '" class="CommentLink">Comment</a>

的jQuery

$(".CommentLink").click( function() {
   var imageId = $(this).attr("id").split('_');
   var imageId = imageId[1];
   $('#hide_' + imageId).slideToggle('fast');
});

实施例

＆＃13;

    $(".CommentLink").click( function() {
       var imageId = $(this).attr("id").split('_');
       var imageId = imageId[1];
       $('#hide_' + imageId).show();
    });

＆＃13;

.com {
    display:none;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_1" class="CommentLink">Comment 1</a>
<a id="show_2" class="CommentLink">Comment 2</a>

<div id="hide_1" class="com">Comments for image 1</div>
<div id="hide_2" class="com">Comments for image 2</div>

＆＃13;

每个都显示具有唯一ID的div

5 个答案:

实施例