有没有更短的方法来编写这个jquery切换代码?

时间:2014-02-04 23:45:13

标签: javascript jquery css toggle

    $('#checkout #button-method').on('click', function() {
        $('#button-info').removeClass('pressed').addClass('pointer');
        $('#button-method').addClass('pressed').removeClass('pointer');     
        $('#shipping-info').addClass('hide');
        $('#shipping-method').addClass('add');
    });
    $('#checkout #button-info').on('click', function() {
        $('#button-info').addClass('pressed').removeClass('pointer');
        $('#button-method').removeClass('pressed').addClass('pointer');     
        $('#shipping-info').removeClass('hide');
        $('#shipping-method').removeClass('add');
    });

类'指针'的CSS是cursor:pointer;对于“按下”类是一种背景颜色变化;对于'隐藏'类,显示:无;类'add'是display:block

有2个按钮(按钮方法和按钮信息)。单击按钮方法时,将禁用按钮信息,将显示shipping-info隐藏,并显示送货方法。单击按钮信息时,会发生相反的过程。有没有办法在两个不同的元素上使用toggleClass压缩此代码?

3 个答案:

答案 0 :(得分:0)

更新:4行jQuery。

当然还有更好的方法。从我的观点来看,这是最好的方法。

在此处检查代码:http://jsfiddle.net/ALsYT/10/

我所做的是将它们放在一个“按钮”var中,因为一个开始隐藏,你必须在加载时做,我只是用CSS作为例子,同时在两个上同时使用切换,我总是在他们之间交换。

HTML:

<button id="button-info" class="green">Button info</button>
<button id="button-method" class="red">Button Method</button>
<br /> <br />
<button id="shipping-info">Shipping info</button>
<button id="shipping-method">Shipping Method</button>

jQuery的:

var buttons = $("#button-info, #button-method").on("click", function(){   
    $(buttons).toggleClass('red green');
    var buttons_to_toggle = $("#shipping-info, #shipping-method").toggle();
});

CSS:

.red {background-color:red}
.green {background-color:green}
#shipping-info { display:block; }
#shipping-method { display:none; }

答案 1 :(得分:0)

使用toggleClass()来交换类:

$('#button-method').on('click', function() {
    $('#button-info').toggleClass('pressed pointer');
    $(this).toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
    $(this).toggleClass('pressed pointer');
    $('#button-method').toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});

这是Fiddle Demo

您的送货信息和送货方法类似乎相同。如果是这种情况,您可以在方法中对它们进行模块化,这样您只能将代码放在一个位置。我认为这是一个错误并相应地编写了解决方案。

您可以通过按钮切换来进一步缩小它:

$('#button-method').on('click', function() {
    $('#button-method, #button-info').toggleClass('pressed pointer');
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
    $('#button-info, #button-method').toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});

此时处理程序变得相同,因此您可以将相同的处理程序绑定到两个按钮:

$('#button-info, #button-method').on('click', function() {
    if (!$(this).hasClass('pressed')) {
        $('#button-method, #button-info').toggleClass('pressed pointer');
        $('#shipping-info, #shipping-method').toggleClass('hide add');
    }
});

答案 2 :(得分:0)

您可以像这样使用toggleClass:

function toggle(condition)
{
    $('#button-info').toggleClass('pressed', !condition).toggleClass('pointer', condition);
    $('#button-method').toggleClass('pressed', condition).toggleClass('pointer', !condition);     
    $('#shipping-info').toggleClass('hide', condition);
    $('#shipping-method').toggleClass('add', condition);
}

$('#button-method').on('click', function() {
    toggle(true);
});
$('#button-info').on('click', function() {
    toggle(false);
});

如果你真的想要压缩代码,你可以改变你的html和css,这样就不需要更改类了。