总结多个jquery点击事件

Question

我很难将多个事件汇总到一个函数中以减少代码。我在一些图像上有一个简单的点击功能，其中 img src 在点击时被切换。

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

谢谢大家。

Answer 1

您可以将唯一的变量存储在 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/

Answer 2

首先，您可以在 img 元素上放置一个通用的 class，我使用的是 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

Answer 3

试试这个：

<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。所以它会保留你的命名。

Fiddle: http://jsfiddle.net/ft8et2o6/6/

补充说明：您不必将图像放入 <a> 标签即可点击。要向用户显示它是可点击的，请使用 cursor: pointer; 样式。

Answer 4

使用.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

Answer 5

我认为这足以提示

$('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')
    {

    }

});

Answer 6

我会尝试重构您的代码，为这样的元素添加相同的 class：

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

此外，请注意，我为所有元素提供了一个 data-image-index 值以获取图像的后缀，这在您的演示中始终相同。

之后，你可以编写如下代码：

$(".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 进行测试。

希望对您有所帮助，

总结多个jquery点击事件

sum up multiple jquery click events

jquery

onclick