的.js

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元素。

Answer 2

if(Controls[i]!=Control && Controls[i].style.visibility=="visible") {
    Reveal("hide",20,0.3,Controls[i]);
}

Answer 3

不确定代码中的含义是什么。策略是首先对所有项目执行默认操作，然后对所选项目执行特定操作。像这样：

for(var i=0;i<Controls.length;i++){
     if(Controls[i].style.visibility=="visible"){

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

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

Answer 4

if( Controls[i] != Control ) {
  if( Controls[i].style.visibility == "visible" ){
    Reveal( "hide", 20, 0.3, Controls[i] );
  };
} else {
  Reveal( "show", 20, 0.3, Control );
};

可以改写为：

if ( Controls[i] == Control ) {
  Reveal( "show", 20, 0.3, Control );
} else if ( Controls[i].style.visibility == "visible" ) {
  Reveal( "hide", 20, 0.3, Controls[i] );
}

Answer 5

继续jQuery建议 -

jQuery通常具有切换功能，在这种情况下它更具吸引力，因为它将代码减少到几行。目前还没有toggleFade功能，但可以轻松添加，引用Karl Swedberg：

您可以编写如下自定义动画：

  jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
  };

然后，你可以这样做：

  $(".bio-toggler").click(function () { 
    $("#bio-form").fadeToggle();
  })

Answer 6

如果您的getComputedStyle函数设置隐藏的可见性，则无需使用Reveal("hide", ...)即可使用此功能。

if(Controls [i] !== Control && Controls[i].style.visibility !== "hidden") {
    Reveal("hide", 20, 0.3, Controls[i]);
}

Answer 7

通过一点猴子修补，你可以在不使用任何外部框架的情况下使其更加清洁。我也冒昧地根据动画排序（如果有的话）不重要的假设重新调整逻辑。

if Control is hidden
    loop through Controls as C
        hide if C != Control
        show if C = Control
else
    hide Control

解释此算法的另一种方法是 - 只要Controls包含至少一个元素（无关紧要），就会切换Control的可见性。所有(Controls minus Control)都将被隐藏。所以我再次冒昧地假设控件中总会有一个控件，Control将永远被切换。

这是它的猴子补丁++代码（也在jsfiddle上）。这消除了函数中的所有ifs和elses。

Toggle函数现在看起来像这样：

function Toggle(Control) {
    var Controls = document.getElementsByTagName("ol" ..
    var Control = Control.getElementsByTagName("ol")[0];

    Control.toggle();
    Controls.filter(function(c) { 
        return c != Control && c.isVisible();
    }).hide();
};

这是代码隐藏。在元素列表中应用属性的NodeList和Array：

NodeList.prototype.forEach = function(f) {
    for(var i = 0; i < this.length; i++) {
        f.apply(null, [this[i]]);
    }
};
Array.prototype.forEach = NodeList.prototype.forEach;

NodeList.prototype.filter = function(f) {
    var results = [];
    for(var i = 0; i < this.length; i++) {
        if(f.apply(null, [this[i]])) {
            results.push(this[i]);
        }
    }
    return results;
};
Array.prototype.filter = NodeList.prototype.filter;  

NodeList.prototype.hide = function() {
    this.forEach(function(e) {
        e.hide();
    });
};
Array.prototype.hide = NodeList.prototype.hide;

NodeList.prototype.show = function() {
    this.forEach(function(e) {
        e.show();
    });
};
Array.prototype.show = NodeList.prototype.show;

这些方法在单个元素上应用属性：

Element.prototype.isVisible = function() {
    return this.style.visibility == 'visible' || this.style.visibility == '';
};

Element.prototype.show = function() {
    this.style.visibility = 'visible';
};

Element.prototype.hide = function() {
    this.style.visibility = 'hidden';
};

Element.prototype.toggle = function() {
    this.isVisible() ? this.hide() : this.show();
};

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

的.js

的.js

7 个答案: