使用JQuery更改图像

时间:2013-04-23 07:34:55

标签: php jquery image toggle

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

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

2 个答案:

答案 0 :(得分:2)

试试这个,

<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>

答案 1 :(得分:1)

将您的其他条件更改为

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