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

Question

在下面的代码中，如果 Control(触发 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();
  }
});

将点击事件附加到 ID=Quote_app 下的每个 ol 元素，如果它当前可见，则隐藏它，否则显示它，并隐藏所有其他 ol 元素。