使用 JQuery 更改图像答案

【问题标题】：Using JQuery to change an image使用 JQuery 更改图像
【发布时间】：2013-04-23 07:34:54
【问题描述】：

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

<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']?>)">

【问题讨论】：

不会翻车是什么意思？另外，你能发布标记吗？
我更新了代码以显示标记。我使用 PHP 生成唯一的行和图像 ID

标签： php jquery image toggle

【解决方案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>

【讨论】：

【解决方案2】：

将 else 条件更改为

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

【讨论】：