根据单击图标更改 IMG SCR
change img scr base on click icon
我创建了一个连接事件表,每行都由事件填充,因此当我单击加入时,图标将更改。我的问题是,当我单击一个事件时,它更改的图标会更改,但与正确的行不对应,即使我单击中间行,也只有第一行图标会更改。
<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>
我的阿贾克斯 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>
$('#join').attr('src', newSrc);
该行将始终更改 ID 为 Join 的第一个元素的图像。您的代码是错误的,因为在您的表中将有多个 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
相关文章:
- 如何更改<svg>标记为<img>用js标记
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript:使用绝对路径设置img src
- Setting default onclick behavior for <img> tag in gene
- 如何在页面加载中使用Jquery/Javascript确定img源
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 插入“;img src"在javascript中
- 检索MongoDB binData并显示为<img>src
- addEventListener的Javascript代码不工作!?(单击时打开放大的img)
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- 限制对HTML/CSS/IMG或根索引文件夹的访问
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 为img设置高度和宽度
- 替换与单词'匹配的文本字符;购物车'替换为img图标
- 我应该如何在 UL 内触发 IMG 标签的点击
- AngularJS提取物<img>来自JSON
- Javascript更改iframe上的scr
- jquery img not loading "scr"
- 根据单击图标更改 IMG SCR