php - 使用 JQuery 更改图像

Question

我有一张桌子，每隔一行都被隐藏起来。当我单击图像时，它将显示隐藏的行并隐藏所有其他行。我可以显示和隐藏行，但由于某种原因，图像不会翻转。

<script type="text/javascript">
function toggleByID(id) {
     $('.data-row-hidden').each(function(index) {
          if ($(this).attr("id") == "row"+id) {
               $(this).toggle(500);
               $('#img'+id).attr("src", "images/toggle_expand.png");
          }
          else {
               $(this).hide();
               $('#img'+id).attr("src", "images/toggle_collapse.png");
          }
     });
}
</script>

这是我用于隐藏行的代码：

<tr id="<?='row'.$value['property_id']?>" class="data-row-hidden">

这是我用来调用该函数的代码：

<img id="<?='img'.$value['property_id']?>" src="images/toggle_collapse.png" border="0" height="20" width="20" onclick="javascript:toggleByID(<?=$value['property_id']?>)">

Answer 1

尝试这个，

<script type="text/javascript">
function toggleByID(id) {
     $('.data-row-hidden').each(function(index) {
          var newImage = new Image();
          if ($(this).attr("id") == "row"+id) {
               $(this).toggle(500);
               newImage.src = "images/toggle_expand.png";
          }
          else {
               $(this).hide();
               newImage.src = "images/toggle_collapse.png";
          }
          //cache busting 
          newImage.src = newImage.src + "&_=" + new Date().getTime();
          $('#img'+id).attr("src", newImage.src);
     });
}
</script>

Answer 2

将您的 else 条件更改为

    else {
           $(this).hide();
           $('#img'+id).show();
           $('#img'+id).attr("src", "images/toggle_collapse.png");
      }