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;
});