单击jquery时有两个函数

时间:2013-05-16 15:34:05

标签: javascript jquery function click

我有这两个功能,我想应用于相同的点击(我确实在点击功能中都有相同的结果...图像切换每次都有效,但显示/隐藏切换(“optionToggle” “)仅适用于第一次。两者都很好地分开工作

提前致谢

function imageToggle() {
    var img = $('.choices').find('.btn').children().children('img');
    img.toggle(function () {img.attr("src","images/misc/dotr-add.png");},
    function () {img.attr("src","images/misc/dotr-minus.png");}
    );
}


function optionToggle() {
    var option = $('.choices').find('.btn').closest('.dishActions').children('.option');
    option.toggle();
}
$('.btn').click(function() {
    optionToggle(); 
    imageToggle();
});

这是代码 -

<div class="dishActions"> 
    <!-- DISH CHOICE --> 
    <div class="choices"> 
        <div class="btn">
            <a href="#">
            <img src="images/misc/dotr-add.png" height="40" width="40" alt="button up" border="0" /> 
        </div> 
        <div class="choicesTxt">Choices </div> 
    </div> 
    <!-- DISH OPTIONS --> 
    <div class="option">

1 个答案:

答案 0 :(得分:2)

$('.btn').on('click', function() {
    var state = $(this).data('state'),
        image = state ? 'dotr-add' : 'dotr-minus';
    $(this).data('state', !state)
           .find('img')
           .prop('src', 'images/misc/' + image + '.png');
});

修改

我不明白你为什么要这样,但有功能:

function imageToggle(state, elem) {
    var image = state ? 'dotr-add' : 'dotr-minus';

    $(elem).find('img').prop('src', 'images/misc/' + image + '.png');
}

function optionToggle(state, elem) {
    $(elem).closest('.dishActions').children('.option').toggle(!state);
}

$('.btn').on('click', function() {
    var state = $(this).data('state');
    imageToggle(state, this);
    optionToggle(state, this);
    $(this).data('state', !state)
});