gpt4 book ai didi

javascript - 带有多个slideToggle的jQuery

转载 作者:行者123 更新时间:2023-12-03 11:48:29 27 4
gpt4 key购买 nike

我有一些最初隐藏在页面上的表单。当用户单击页面上的特定链接时,会使用 jQuery slipToggle 显示相应的表单。我现在做这件事的方式似乎是经过深思熟虑的,必须有一种更简洁的方式来做这件事。谁能帮助我更有效地做到这一点,即更少的代码、最佳实践等?

    // Show & Hide the forms on the "We need your help" page
jQuery('.contribute-form').hide();
jQuery('.translate-form').hide();
// Contribute Form
jQuery('.contribute').on('click', function(){
if(jQuery('.translate-form').css('display', 'block')){
jQuery('.translate-form').slideToggle('slow');
jQuery('.contribute-form').slideToggle('slow');
} else if(jQuery('.donate-form').css('display', 'block')){
jQuery('.donation-form').slideToggle('slow');
jQuery('.contribute-form').slideToggle('slow');
} else {
jQuery('.contribute-form').slideToggle('slow');
}
});
// Translate Form
jQuery('.translate').on('click', function(){
if(jQuery('.donate-form').css('display', 'block')){
jQuery('.donate-form').slideToggle('slow');
jQuery('.translate-form').slideToggle('slow');
} else if(jQuery('.contribute-form').css('display', 'block')){
jQuery('.contribute-form').slideToggle('slow');
jQuery('.translate-form').slideToggle('slow');
} else {
jQuery('.translate-form').slideToggle('slow');
}
});
// Donate Form
jQuery('.donate').on('click', function(){
if(jQuery('.translate-form').css('display', 'block')){
jQuery('.translate-form').slideToggle('slow');
jQuery('.donate-form').slideToggle('slow');
} else if(jQuery('.contribute-form').css('display', 'block')){
jQuery('.contribute-form').slideToggle('slow');
jQuery('.donate-form').slideToggle('slow');
} else {
jQuery('.donate-form').slideToggle('slow');
}
});

最佳答案

首先,使用美元别名来获得更简洁的代码。然后,将选择器组合到单个语句中。最后,将 is() 方法与 :visible 一起使用,而不是摆弄 CSS。

jQuery(function($) {
$('.contribute').on('click', function(){
if ( $('.translate-form').is(':visible') ) {
$('.translate-form, .contribute-form').slideToggle('slow');
} else if ( $('.donate-form').is(':visible') ) {
$('.donation-form, .contribute-form').slideToggle('slow');
} else {
$('.contribute-form').slideToggle('slow');
}
});
});

我确信使用类和 DOM 遍历可以进一步简化您的逻辑。如果您想将代码放在 http://jsfiddle.net 的演示中我们可以提供更多建议。

关于javascript - 带有多个slideToggle的jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25941555/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com