Question

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

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

试试这个：

<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;样式。

Answer 2

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

首先，您可以在img元素上放置一个公共类，我使用preiskreis，您可以附加一个单击处理程序。然后，您可以使用父index()元素的a来获取相关图像。试试这个：

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

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

<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点击事件

6 个答案: