Есть ли более элегантное решение, чем оператор if без предложения else?

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();
  }
});

Это прикрепляет событие click к каждому элементу ol, находящемуся под чем-то с ID = Quote_app, и, если оно отображается в данный момент, скрывает его, а в противном случае показывает его и скрывает все остальные элементы ol.

Answer 2

Не уверен, что означает что в вашем коде. Stratagy должен сначала выполнить действие по умолчанию для всех элементов, а затем выполнить определенное действие для выбранного элемента. Примерно так:

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 3

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

Answer 4

С помощью небольшого количества исправлений вы можете сделать это намного чище, не используя никаких внешних фреймворков. Я также позволил себе переставить логику, исходя из предположения, что порядок анимации (если есть) не важен.

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 всегда будет переключаться.

Вот код monkey-patch ++ для него (также на jsfiddle ). Это исключает все if и 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();
};

Answer 5

Это будет работать без необходимости использования getComputedStyle, при условии, что ваша функция Reveal("hide", ...) устанавливает видимость скрытым.

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

Answer 6

Следовать предложению jQuery -

jQuery часто имеет функцию переключения, которая становится еще более привлекательной в этой ситуации, так как сокращает ваш код до пары строк. В настоящее время нет функции toggleFade, но ее можно легко добавить, цитируя Карла Сведберга:

Вы можете написать собственную анимацию так:

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

Затем вы можете сделать это:

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

;

Answer 7

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] );
}