Question

我需要在同一页面的多个ID中运行相同的效果这样做的简短方法是什么：

function showDisc1(){$('#bottomBox1').slideDown();$("#bottomBox1").addClass("open");$("#bottomBox1").removeClass("close");}
function showDisc2(){$('#bottomBox2').slideDown();$("#bottomBox2").addClass("open");$("#bottomBox2").removeClass("close");}
function showDisc3(){$('#bottomBox3').slideDown();$("#bottomBox3").addClass("open");$("#bottomBox3").removeClass("close");}
function showDisc4(){$('#bottomBox4').slideDown();$("#bottomBox4").addClass("open");$("#bottomBox4").removeClass("close");}
...... etc

$(document).ready(function() {
$('#openbottomBox1').click(function(){
if ( $('#bottomBox1').hasClass('close') ) {
showDisc1();
} else if ( $('#bottomBox1').hasClass('open') ) {
hideDisc1();
};});});
.... again!!

HTML：

<div class="bottomBox close">
<div class="wrapper">
<a class="left disc" href="javascript:;" id="openbottomBox1"><div class="left text">View Description</div><div class="sprite right"></div></a> | <a class="itemDetails" href="javascript:;" id="itemDetails1">Details</a>
</div>
<p class="close clear discContent" id="bottomBox1"><a href="javascript:;" class="hideDisc" id="hideDisc1">x</a>
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
</p>
</div>

Answer 1

为所有这些框提供单个类名，并将点击绑定到类。

$(document).ready(function() {
   $('.box').click(function(){
       toggleDisc(this);
   });
});

function toggleDisc(that){
   if ($(that).hasClass('close'){
       $(that).slideDown().addClass("open").removeClass("close");
   }else{
       // the other thing
   }
}

Answer 2

在所有元素中添加一个类（在本例中为“bottomboxes”），并使用类选择器进行操作。

function toggleDiscs(
{   
  $('.bottomboxes').slideToggle();
}

最后，您可以考虑使用SlideToggle而不是slideDown和slideUp，这样您就不必跟踪它是否已打开。（也显示）

此外，使用链接在同一元素上执行多个操作而不是重复选择它更有效。

所以而不是

   $("#something").doSomething;
   $("#something").doSomethingElse;

这样做

   $("#something").doSomething.doSomethingElse;

Answer 3

如果除了使用ID作为标识符之外别无选择，请使用：

$(document).ready(function()
{
    $('#openbottomBox1, #openbottomBox2, #openbottomBox3, #openbottomBox4').click(function()
    {
        var $bottomBox = $('#bottomBox' + this.id.substr(-1));

        if ( $bottomBox.hasClass('close') )
        {
            $bottomBox.slideDown().addClass('open').removeClass('close');
        }
        else if ( $bottomBox.hasClass('open') )
        {
            $bottomBox.slideUp().removeClass('open').addClass('close');
        };
    });
});

Answer 4

你可以创建一个多线程函数，它根据传递的变量隐藏和显示：

function ShowHide(element,action){  
   if(action == 'show'){
        $(element).slideDown();
        $(element).addClass("open");
        $(element).removeClass("close");
    }else{
        //Do hiding functions here;
    }

}

然后在您的文档中准备好您通过操作传递要更改的元素的字符串。

$(document).ready(function() {
$('#openbottomBox1').click(function(){
if ( $('#bottomBox1').hasClass('close') ) {
ShowHide('#bottomBox1','show');
} else if ( $('#bottomBox1').hasClass('open') ) {
ShowHide('#bottomBox1','hide');
};});});

Answer 5

您应该使用jQuerys可链接性。

$('#bottomBox4').slideDown();$("#bottomBox4").addClass("open");$("#bottomBox4").removeClass("close");

可以替换为;

$('#bottomBox4').slideDown().addClass("open").removeClass("close");

在同一页面的多个ID中运行相同的效果

5 个答案: