使用jQuery來更改圖像

我有一個表，其他每一行都隱藏起來。當我點擊圖片時，它會顯示隱藏的行並隱藏所有其他行。我可以顯示並隱藏行，但出於某種原因，圖像不會翻轉。使用jQuery來更改圖像

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

來源

2013-04-23 MikeSig7

你是什麼意思，它不會翻滾？另外，你可以發佈標記嗎？ – billyonecan 2013-04-23 07:36:34

我更新了代碼以顯示標記。我使用PHP來生成獨特的行和圖像ID – MikeSig7 2013-04-23 07:41:11

試試這個，

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

來源

2013-04-23 07:41:26 Satpal

將您的其他條件更改爲

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

來源

2013-04-23 07:43:20

使用jQuery來更改圖像

回答

相關問題