Javascript替換擴展onclick

我有一個網站，我有gifs。 GIF被替換爲靜態圖像，點擊它們後，它們被替換爲GIF版本。但是，如果用戶第二次點擊它們，我想再次更改爲靜態版本。到目前爲止，我得到了這個：Javascript替換擴展onclick

問題是，我不能保留originExt爲例如png。如果我第二次點擊它，originExt將變成.gif，所以它會將gif改成gif。我想知道我怎麼能保持巴紐第一次點擊之後，這些變量感謝

$(function(){ 
    $('.gif').click(function(){ 
      var src = $(this).attr('src'); 
      var originExt = "."+src.substr(src.lastIndexOf('.') + 1); 

      if($(this).hasClass('play')) 
      { 
       $(this).attr("src", src.replace(/\.gif/i, originExt)); 
       $(this).removeClass('play'); 
      } else 
      { 
       $(this).attr('src', 'sources/uploads/t/234.gif'); 
       $(this).addClass('play'); 
      } 
      }); 
     });

來源

2014-01-13 DeiForm

您可以在包含原始擴展名的每個圖像上添加數據屬性。然後在你的點擊功能裏面抓住它。 –

由於您使用的是jQuery，因此您可以始終將GIF-url和PNG-url存儲在數據屬性中，以便您可以在它們之間切換。所以當你的鏈接沒有'play'類時，你可以將'src'設置爲GIF-屬性。 – NoLifeKing

謝謝你們，我將數據源存儲爲gif和靜態img數據屬性。它完美的工作！ – DeiForm

店原分機的AA性能和檢索需要的時候：

$(function(){ 
    $('.gif').click(function(){ 
      var src = $(this).attr('src'); 

      if($(this).hasClass('play')) 
      { 
       // Here you retrieve the original extension from the element's property 
       $(this).attr("src", src.replace(/\.gif/i, $(this).prop('origExt'))); 
       $(this).removeClass('play'); 
      } else 
      { 
       // Here you get the original extension,and save it to a property of the element 
       var originExt = "."+src.substr(src.lastIndexOf('.') + 1); 
       $(this).prop('origExt', originExt); 
       $(this).attr('src', 'sources/uploads/t/234.gif'); 
       $(this).addClass('play'); 
      } 
      }); 
     });

來源

2014-01-13 19:54:15 Andrey

這裏有一個選項：

$(function() { 
    $('.gif').click(function() { 
     var src = $(this).attr('src'); 
     if (!$(this).attr('data-src')) $(this).attr('data-src', "." + src.substr(src.lastIndexOf('.') + 1)); 

     if ($(this).hasClass('play')) { 
      $(this).attr("src", src.replace(/\.gif/i, $(this).attr('data-src'))); 
      $(this).removeClass('play'); 
     } else { 
      $(this).attr('src', 'sources/uploads/t/234.gif'); 
      $(this).addClass('play'); 
     } 
    }); 
});

來源

2014-01-13 19:55:05

Javascript替換擴展onclick

回答

相關問題