Цикл отображения инструкции по каждому элементу относительно номер выпуска


У меня есть цикл foreach, проходя каждый раздел XML-документа (пример сказал, что XML-документ может быть найден в этом так вопрос) и отображать их в DIV с соответствующими классами.

<xsl:for-each select="sections/section">
  <xsl:sort select="sc_index" />
  <h2>
    <xsl:value-of select='name' />
  </h2>
  <div class="rel10r3">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='10r3']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel11r2" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='11r2']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel12r1" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='12r1']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel12r2" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='12r2']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel13r1" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='13r3']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
</xsl:for-each>

Что мне делать после этого, используя выпадающее меню, и с помощью JavaScript изменять стиль.свойство отображения ДИВС соответственно.

Форма:

<form>
  <select name="release" onchange="return showHide(this);">
     <option value="10r3" selected="selected">10r3</option>
     <option value="11r2">11r2</option>
     <option value="12r1">12r1</option>
     <option value="12r2">12r2</option>
     <option value="13r1">13r1</option>
   </select>
 </form>

На JavaScript:

function showHide(selection) {
    var f = selection.form;
    // Retrieve the value of the option selected.
    var opt = selection.options[selection.selectedIndex].value;
    /* Retrieve all the div elements of the document and then parse them to
     * see if they have a classname corresponding with the selected release.
     * If it is the case, remove all display style, otherwise set the
     * display style to none.
     */
    var divArray = document.getElementsByTagName("div");
    for(var i=0; i<divArray.length; i++){
        var relArray = ["10r3","11r2","12r1","12r2","13r1"];
        for(var j=0; j<relArray.length; j++){
            var relName = relArray[j];
            if(divArray[i].className == "rel"+relName){
                if(opt===relName){
                    divArray[i].style.display = "";
                }else{
                    divArray[i].style.display = "none";
                }
            }
        }
    }
    return false;
}

Я уже рефакторинг мой код JavaScript, но есть еще много повторяющегося кода, и он может только расти больше релизов не будет.

Редактировать: еще одна вещь, эти инструкции отображаются в CSS всплывающее окно, используя метод, который я нашел (ссылка):

HTML-код:

<div>
  <a id="helplink" href="#" onclick="popup('popUpDiv')">Click Here to Open the Help</a>
</div>

На JavaScript:

function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=50;
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=50;
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}

Усс:

#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:700px;
height:700px;
z-index: 9002;
}

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

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



1852
3
задан 16 сентября 2011 в 09:09 Источник Поделиться
Комментарии
3 ответа


  1. в showHide() функции:

    var relArray = ["rel10r3","rel11r2","rel12r1","rel12r2","rel13r1"];
    for(var i=0; i<divArray.length; i++)
    {
    var currentDiv = divArray[i];
    if(currentDiv.className && relArray.indexOf(currentDiv.className) != -1)
    {
    currentDiv.style.display = "";
    }
    else
    {
    currentDiv.style.display = "none";
    }
    }

  2. Не будьте скупы на форматирование, как это делает большой разницы в читабельности. например:

    function toggle(div_id) {
    var el = document.getElementById(div_id);
    if (el.style.display == 'none' )
    {
    el.style.display = 'block';
    }
    else
    {
    el.style.display = 'none';
    }
    }

  3. JavaScript-это очень мило с falsey значения:

    if (typeof window.innerWidth != 'undefined') {
    viewportheight = window.innerHeight;
    } else {
    viewportheight = document.documentElement.clientHeight;
    }

    может быть написано:

    if (window.innerWidth) {
    viewportheight = window.innerHeight;
    } else {
    viewportheight = document.documentElement.clientHeight;
    }

    или

    viewportheight = window.innerHeight || document.documentElement.clientHeight;

  4. модели, как:

    if(){
    //
    }else{
    if(){
    //
    }else{
    //
    }
    }

    можно написать гораздо проще и чище:

    if(){
    //
    }else if(){
    //
    }else{
    //
    }

  5. у вас есть:

    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
    //etc etc

    может быть:

    window_width = Math.max(viewportwidth, document.body.parentNode.clientWidth, document.body.parentNode.scrollWidth); 

  6. вы используете переменные для хранения значений в одну строку:

    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=50;
    popUpDiv.style.left = window_width + 'px';

    вместо:

    var popUpDiv = document.getElementById(popUpDivVar);
    if(popUpDiv) // incase it couldn't find the div.
    {
    popUpDiv.style.left = "50px";
    }

ТЛ;ДР? http://jsfiddle.net/37Uge/1/

2
ответ дан 5 октября 2011 в 01:10 Источник Поделиться

Я бы кэшировать переменные циклов, а также...

 for(var i=0; i<divArray.length; i++){}

...будет написано

var len = divArray.length;

for(var i = 0; i < len ; i++){}

Это по данным Адди Османи блог "уроки JavaScript код комментарий":


Проблема: массив некэшированные.длина используется во всех для петли. Это
особенно плохо, как вы используете его при просмотре
'Уход по

1
ответ дан 5 октября 2011 в 01:10 Источник Поделиться

По JS стороны, я не уверен, что тебе нужен двойной цикл.
Вы пробовали что-то вроде этого:

var optClass = "rel" + selection.options[selection.selectedIndex].value;
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++){
divArray[i].style.display = optClass === divArray[i].className ? "" : "none";
}

На XSLT на стороне, вы хотите, чтобы фактор в div блоки в отдельный шаблон с параметрами на номер релиза и стиль.

0
ответ дан 16 сентября 2011 в 12:09 Источник Поделиться