是否有比没有else子句的if语句更优雅的解决方案？

Question

在下面的代码中,if Control(trigers Toggle的第一个元素OL)不是Visible它应该被设置Visible而所有其他Controls(Controls[i])都是这样Hidden.

.js文件

function Toggle(Control){
    var Controls=document.getElementsByTagName("ol",document.getElementById("Quote_App"));
    var Control=Control.getElementsByTagName("ol")[0];
    if(Control.style.visibility!="visible"){
        for(var i=0;i<Controls.length;i++){
            if(Controls[i]!=Control){

                Reveal("hide",20,0.3,Controls[i]);

            }else{

                Reveal("show",20,0.3,Control);

            };
        };
    }else{

        Reveal("hide",20,0.3,Control);

    };
};

虽然函数[ Toggle]工作正常,但实际上它已设置Controls[i]为Hidden即使已经存在.

通过添加If如下代码中的语句可以很容易地解决这个问题,肯定有一个更优雅的解决方案,可能是一个复杂的If条件？

.js文件

function Toggle(Control){
    var Controls=document.getElementsByTagName("ol",document.getElementById("Quote_App"));
    var Control=Control.getElementsByTagName("ol")[0];
    if(Control.style.visibility!="visible"){
        for(var i=0;i<Controls.length;i++){
            if(Controls[i]!=Control){

if(Controls[i].style.visibility=="visible"){

                Reveal("hide",20,0.3,Controls[i]);

};

            }else{

                Reveal("show",20,0.3,Control);

            };
        };
    }else{

        Reveal("hide",20,0.3,Control);

    };
};

始终感谢您的帮助.

Answer 1

在丑陋的纯JavaScript代码世界中,您的解决方案很好.但只是因为你说"优雅",我的回答是使用jQuery.

使用基于行为的代码而不是基于事件的代码,我会写它可能更接近实际情况,所以这不会完全匹配你的代码..但是,它看起来像:

$('#Quote_app ol').click(function() { 
  if ($(this).is(':visible')) {
    $(this).fadeOut();
  } else {
    $(this).fadeIn();
    $('ol', $(this).parent()).not(this).fadeOut();
  }
});

这会将click事件附加到ID = Quote_app之下的每个ol元素,如果它当前可见,则隐藏它,否则,显示它,并隐藏所有其他ol元素.