0

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

<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>
4

1 回答 1

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

该行将始终更改具有 join 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

于 2013-11-03T12:37:21.160 回答