Javascript交換圖像。這是點擊

我想單擊圖像時執行一個簡單的圖像交換。我正在循環訪問一個數據庫，所以我有一堆「豎起大拇指」的圖像。當用戶點擊其中一個圖像時，我希望該特定圖像變爲綠色。這兩個圖像名稱是「thumbs_up.png」和「thumbs_up_green.png」Javascript交換圖像。這是點擊

我可以使用「.this」使圖像消失，但無法弄清楚如何進行圖像交換。任何幫助將是偉大的！謝謝！

這裏是我的腳本：

<script> 
    function thumbTip(element){ 
     var name = element.name; 
     $(element).hide(); 
    } 
</script>

這裏是我的HTML：

<table width='100%' class='test'> 
    <tr> 
     <td><span class='test'>$p[first_name]</span></td> 
     <td align='center'><span class='test'>$p[date_time]</span></td> 
    </tr> 
    <tr> 
     <td width='87%'><span class='test2'>$p[tip]</span></td> 
     <td width='13%' align='center'> 
      <span class='test3'> 
       <a href='#' onClick='thumbTip(this)'> 
        <img src='../images/thumbs_up.png' width='25' scalefit='1' /> 
       </a> 
      </span> 
     </td> 
    </tr> 
</table>

來源

2013-08-04 Brandon

您可以將第二張圖片的src值存儲爲img標籤上的屬性。然後點擊使用jQuery，你可以交換兩個。將嘗試找到我的意思的一個很好的例子。另外一個更好的解決方案可能是從圖像標籤添加/刪除一個類，以便該圖像位於css中。這樣，jQuery的添加/刪除類方法可以與hasClass（）一起使用，如果選中 – lewis

謝謝劉易斯！欣賞這個建議！ – Brandon

正如你所標記的jQuery。能不能給一個jQuery的解決方案..

$('.test3 a').on('click', function(e) { 
    e.preventDefault(); 
    var $img = $(this).find('img'); 

    $img.attr('src', function(_,s) { 
     return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png' 
                : '../images/thumbs_up_green.png' 
    }); 
});

剛換出基於在條件圖像的src屬性。

來源

2013-08-04 12:49:04

和e.preventDefault（）不遵循鏈接？ – mplungjan

@mplungjan .. Right補充說..謝謝 –

WOOOOHOOOOOO - 這是我正在尋找的，而且看起來很棒。你搖滾！ – Brandon

在下面，你將有兩個CSS類的圖像命名爲大拇指和拇指向上綠色，每次你只是切換元素上的哪一個。

function thumbTip(element){ 
    var el = $(element); 

    el.toggleClass("thumbs-up"); 
    el.toggleClass("thumbs-up-green"); 
}

來源

2013-08-04 12:53:10 lewis

也許toggleClass會保存一些行？還有一些解釋說，你正在操縱CSS而不是交換圖像，按順序 – mplungjan

不能相信我在描述中使用了toggle這個詞，但完全忘了toggleClass（）本身。感謝您指出:) – lewis

但你仍然使用它錯 – mplungjan

這裏的解決方案以純JS

我會建議換分兩步大拇指圖像：

可檢查圖像的時刻顯示。
然後改變圖像進一步的代碼。

例如：

<script> 
    function thumbTip(element){ 
     if(element.src == '../images/thumbs_up.png'){ 
      element.src = '../images/thumbs_up_green.png'; 

      //Further Code: (when thumb gets green) 

     }else{ 
      element.src = '../images/thumbs_up.png'; 

      //Further Code: (when thumb gets normal again) 

     } 
    }

注：可向IMG一個絕對路徑會是在這種情況下更好。

來源

2013-08-04 12:54:28 hark

他通過（這）是鏈接，圖像 – mplungjan

對不起，閱讀太快。基於我的JS-plain-solution，「onClick ='thumbTip（this）'」屬性應該放在img標籤中！ – hark

Javascript交換圖像。這是點擊

回答

相關問題