總結了多個jQuery點擊事件

-1

爲了減少代碼，我很難總結多個事件到一個函數中。對於img src被切換到onclick的幾張圖片，我有一個簡單的點擊功能。總結了多個jQuery點擊事件

的HTML

<a href="#!"> 
    <img src="image_1.png" style="opacity: 1;" class="preiskreis_1" /> 
</a> 
<a href="#!"> 
    <img src="image_2.png" style="opacity: 1;" class="preiskreis_2" /> 
</a> 
<a href="#!"> 
    <img src="image_2.png" style="opacity: 1;" class="preiskreis_3" /> 
</a>

的JS

$('a .preiskreis_1').on({ 
    'click': function() { 
     var src = ($(this).attr('src') === 'preis_1.png') 
      ? 'finanz_1.png' 
      : 'preis_1.png'; 
     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
    } 
}); 

$('a .preiskreis_2').on({ 
    'click': function() { 
     var src = ($(this).attr('src') === 'preis_2.png') 
      ? 'finanz_2.png' 
      : 'preis_2.png'; 
     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
    } 
}); 

$('a .preiskreis_3').on({ 
    'click': function() { 
     var src = ($(this).attr('src') === 'preis_3.png') 
      ? 'finanz_3.png' 
      : 'preis_3.png'; 
     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
    } 
});

現在我要完成的任務是總結這些代碼在js一切在一個功能。任何想法如何實現這一目標？

這裏是一個fiddle

謝謝你們。

來源

2015-02-10 Supapinzi

試試這個：

<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_1.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" /> 
</a> 

<br> 
<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_2.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" /> 
</a> 

<br> 
<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_3.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" /> 
</a> 

<script> 
    $('a .preiskreis').on({ 
     'click': function() { 
      var src = $(this).attr('src'); 
      var a = src.split('/'); 
      var n = a[a.length-1]; 
      if (n.substr(0,5) == 'preis') { 
       n = n.replace('preis','finanz'); 
      } 
      else { 
       n = n.replace('finanz','preis'); 
      } 
      src = 'http://hornung.eprospekt.info/assets/images/'+n; 
      $(this).fadeTo(450,0, function() { 
       $(this).attr('src', src).fadeTo(100,1); 
      }); 
     } 
    }); 
</script>

在這種情況下，我們找到了圖片的文件名，然後檢查它包含PREIS。如果是，請將其更換爲fianz，否則將其更換爲preis。所以它保持你的命名。

小提琴：http://jsfiddle.net/ft8et2o6/6/

一些附加說明：你不必把圖像轉換成<a>標籤點擊。要向用戶顯示它是可點擊的，請使用cursor: pointer;樣式。

來源

2015-02-10 11:51:58 Fenistil

謝謝你的隊友，這對我來說真的很好。我會嘗試使用它 – Supapinzi 2015-02-10 12:04:42

你可以存儲唯一的變量東西在HTML屬性附加傷害

檢查了這一點：

<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_1.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" data-id="1" /> 
</a> 




$('a .preiskreis').on({ 
    'click': function() { 
     num = $(this).attr('data-id'); 
     var src = ($(this).attr('src') === 'http://hornung.eprospekt.info/assets/images/preis_'+num+'.png') 
      ? 'http://hornung.eprospekt.info/assets/images/finanz_'+num+'.png' 
      : 'http://hornung.eprospekt.info/assets/images/preis_'+num+'.png'; 
     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
    } 
});

http://jsfiddle.net/ft8et2o6/2/

來源

2015-02-10 11:48:45

首先，你可以把一個普通類的img元素，我用preiskreis ，你可以附加一個單擊處理程序。然後，您可以使用父a元素的index()來獲取相關圖像。試試這個：

$('a .preiskreis').on({ 
    'click': function() { 
     var index = $(this).closest('a').index('a') + 1; 
     var src = ($(this).attr('src') === 'http://hornung.eprospekt.info/assets/images/preis_' + index + '.png') 
      ? 'http://hornung.eprospekt.info/assets/images/finanz_' + index + '.png' 
      : 'http://hornung.eprospekt.info/assets/images/preis_' + index + '.png'; 
     $(this).fadeTo(450, 0, function() { 
      $(this).attr('src', src).fadeTo(100, 1); 
     }); 
    } 
});

Example fiddle

來源

2015-02-10 11:49:24

的問題是，如果我刪除一個圖像，但保留的名稱，或使用任何其他編號方法，那麼指數將不會代表正確的圖像文件名。 – Fenistil 2015-02-10 11:59:11

使用.index()來獲取元素位置。

$('a').on('click', 'img', function(e) { 

var index = $(this).index('img')+1; 
var src = ($(this).attr('src') === 'http://hornung.eprospekt.info/assets/images/preis_'+index+'.png') 
      ? 'http://hornung.eprospekt.info/assets/images/finanz_'+index+'.png' 
      : 'http://hornung.eprospekt.info/assets/images/preis_'+index+'.png'; 

     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
});

DEMO

來源

2015-02-10 11:58:49

我認爲這是不夠的提示

$('a img').on('click',function(){ 
    var src=$(this).attr('src'); 
    if(src=='image_1.png') 
    { 
     //your code 
    } 
    else if(src=='image_1.png') 
    { 

    } 
    else if(src=='image_3.png') 
    { 

    } 

});

來源

2015-02-10 12:00:27 Saif

我想嘗試重構你的代碼添加相同的類這樣的要素：

<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_1.png" 
     alt="Kauf oder Finanzierung" style="opacity: 1;" 
     class="preiskreis" data-image-index="1" /> 
</a> 

<br> 

<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_2.png" 
     alt="Kauf oder Finanzierung" style="opacity: 1;" 
     class="preiskreis" data-image-index="2" /> 
</a> 

<br> 

<a href="#!"> 
    <img src="http://hornung.eprospekt.info/assets/images/preis_3.png"  
     alt="Kauf oder Finanzierung" style="opacity: 1;" 
     class="preiskreis" data-image-index="3" /> 
</a>

此外，請注意，我給所有的元素是數據圖像索引值以獲取圖像的後綴，這在演示中始終是相同的。

之後，你可以寫下面的代碼：

$(".preiskreis").on({ 
    'click': function() { 

     var element = $(this); 

     var imageIndex = element.data("image-index"); 
     var indexExt = imageIndex.toString() + '.png'; 
     var hornungImagesUrl = 'http://hornung.eprospekt.info/assets/images/'; 

     var imageSource = hornungImagesUrl + 'preis_' indexExt; 
     var finanzImg = hornungImagesUrl + 'finanz_'+ indexExt; 
     var preisImg = hornungImagesUrl + 'preis_' + indexExt; 

     var src = (element.attr('src') == imageSource) ? finanzImg : preisImg; 

     $(this).fadeTo(450,0, function() { 
      $(this).attr('src', src).fadeTo(100,1); 
     }); 
    } 
});

退房this gist用於測試目的。

希望它能幫助，

來源

2015-02-10 12:00:31 avenet

總結了多個jQuery點擊事件

回答

相關問題