Question

我创建了一个连接事件表，每个行都由事件填充，所以当我点击加入时，图标将会改变。我的问题是，当我点击一个事件时，它改变的图标但不对应于我点击的正确行，即使我单击中间行，我也只会改变第一行图标。

<td>
 <a href="#" class="join_now" id="<?php echo $row['event_id'];?>">

    <?php $join=$ db->verify_already_join($official_id, $id); if ($join == 0) { echo "

    <img src='images/join.png' id='join' width='30' height='30' />"; } else { echo "

    <img src='icon/votenow.png' id='join' width='30' height='30' />"; } ?>

 </a>
<td>

我的Ajax JQUERY

<script>
    $(document).ready(function () {
        var name = <? php echo json_encode($name); ?> ;
        var off_id = <? php echo json_encode($official_id); ?> ;
        $(".join_now").live("click", function () {
            var id_value = $(this).attr("id");
            var newSrc = 'icon/votenow.png';
            $.ajax({
                type: "POST",
                url: "join.now.php",
                data: "id=" + id_value + "&name=" + name + "&official=" + off_id,
                success: function (html) {
                    if (html == '0') {
                        $(".err_msg").html("<strong><font color='red'>You have Successfully Join this Event!</font></strong>");
                        $('#join').attr('src', newSrc);
                    }
                    if (html == '1') {

                        $(".err_msg").html("<strong><font color='red'>You Already Join this Event!</font></strong>");
                    }
                },
                beforeSend: function () {
                    $(".err_msg").html("<strong>Loading...</strong>")
                }
            });
            return false;
        });
    });
</script>

Answer 1

           $('#join').attr('src', newSrc);

该行将始终更改具有连接ID的第一个元素的图像。你的代码是错误的，因为在你的表中会有多个id为join的元素..这是错误的。在您的DOM中，不应该有2个具有相同ID的元素。

将您的img代码更改为

<td>
 <a href="#" class="join_now" id="<?php echo $row['event_id'];?>">

    <?php $join=$ db->verify_already_join($official_id, $id); if ($join == 0) { echo "

    <img src='images/join.png' class='join' width='30' height='30' />"; } else { echo "

    <img src='icon/votenow.png' class='join' width='30' height='30' />"; } ?>

 </a>
<td>

然后改变图像src的代码应该是

           $('#'+id_value + ' .join').attr('src', newSrc);

你有自己正确形成的dom

根据点击图标更改img src

1 个答案: