总结了多个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点击事件

回答

相关问题