siblings.removeclass 不适用于图片
siblings.removeclass doesn't work on image
我 copy/paste 此代码构成了我网站上的另一个页面。在第一页上一切正常,不知何故在第二页上就不行了...
我正在尝试创建自定义单选按钮功能。该页面显示图像(从我的数据库加载,使用 mysqli_fetch_array)。用户可以单击这些图像。用户单击图像后,我希望 javascript 将另一个 class 应用到该图像。如果用户点击另一张图片,我想恢复第一张图片的 class 并将 class 应用于最新点击的图片。
我有:
脚本
$(window).load(function(){
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$(this).addClass('bedragbol_select').siblings().removeClass('bedragbol_select');
document.getElementById("kosten").value = bedragid;
});
});
PHP
<table width="100%">
<? while($rows_bedrag=mysqli_fetch_array($sql_bedrag,MYSQLI_ASSOC)){ ?>
<tr>
<td class="img_programmaker_dag">
<img src="../images/<? echo $rows_bedrag['url']; ?>.png" data-bedragid="<? echo $rows_bedrag['id']; ?>" class="bedragbol">
</td>
<td>
<font class="txt_programmaker_dag">
<? echo $rows_bedrag['omschrijving']; ?>
</font>
</td>
</tr>
<? } ?>
</table>
<br><br>
<input type="text" id="kosten" name="kosten">
我添加了输入字段以查看该功能是否正常工作。每次我单击图像时,该值都会更新。这很好用。只是 css 部分没有正常工作。现在它确实在单击时应用 class,它只是在单击另一个图像时不会删除所有兄弟。它保留选定的 class。因此,如果我单击所有图像,所有图像都会保留它们的选择 class。
我错过了什么?我需要调整什么才能删除所有兄弟姐妹的 class,除了被点击的兄弟姐妹?
如果您没有在任何其他元素中使用 .bedragbol
class,请尝试此代码
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$('.bedragbol').removeClass('bedragbol_select');
$(this).addClass('bedragbol_select')
document.getElementById("kosten").value = bedragid;
});
否则试试这个
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$(this).siblings().removeClass('bedragbol_select');
$(this).addClass('bedragbol_select')
document.getElementById("kosten").value = bedragid;
});
我 copy/paste 此代码构成了我网站上的另一个页面。在第一页上一切正常,不知何故在第二页上就不行了...
我正在尝试创建自定义单选按钮功能。该页面显示图像(从我的数据库加载,使用 mysqli_fetch_array)。用户可以单击这些图像。用户单击图像后,我希望 javascript 将另一个 class 应用到该图像。如果用户点击另一张图片,我想恢复第一张图片的 class 并将 class 应用于最新点击的图片。
我有:
脚本
$(window).load(function(){
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$(this).addClass('bedragbol_select').siblings().removeClass('bedragbol_select');
document.getElementById("kosten").value = bedragid;
});
});
PHP
<table width="100%">
<? while($rows_bedrag=mysqli_fetch_array($sql_bedrag,MYSQLI_ASSOC)){ ?>
<tr>
<td class="img_programmaker_dag">
<img src="../images/<? echo $rows_bedrag['url']; ?>.png" data-bedragid="<? echo $rows_bedrag['id']; ?>" class="bedragbol">
</td>
<td>
<font class="txt_programmaker_dag">
<? echo $rows_bedrag['omschrijving']; ?>
</font>
</td>
</tr>
<? } ?>
</table>
<br><br>
<input type="text" id="kosten" name="kosten">
我添加了输入字段以查看该功能是否正常工作。每次我单击图像时,该值都会更新。这很好用。只是 css 部分没有正常工作。现在它确实在单击时应用 class,它只是在单击另一个图像时不会删除所有兄弟。它保留选定的 class。因此,如果我单击所有图像,所有图像都会保留它们的选择 class。
我错过了什么?我需要调整什么才能删除所有兄弟姐妹的 class,除了被点击的兄弟姐妹?
如果您没有在任何其他元素中使用 .bedragbol
class,请尝试此代码
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$('.bedragbol').removeClass('bedragbol_select');
$(this).addClass('bedragbol_select')
document.getElementById("kosten").value = bedragid;
});
否则试试这个
$('.bedragbol').click(function() {
var bedragid = $(this).data("bedragid");
$(this).siblings().removeClass('bedragbol_select');
$(this).addClass('bedragbol_select')
document.getElementById("kosten").value = bedragid;
});