любой способ уменьшить количество togTriggers необходимо?

Я использую следующий скрипт, чтобы открыть окно при наведении мыши и щелкнуть. На моей странице есть много ящиков, которые нужно открыть, и многое другое. Единственный способ, с помощью которого я могу работать в этих боксах, - это каждый ящик, чтобы создать новый togTrigger. Даже когда одно и то же слово открывает ту же самую коробку в другом месте на странице, мне нужен новый togTrigger. В конце концов, я вернусь togTrigger1 togTrigger200 или что-то в этом роде. Это не очень практично. Любой способ уменьшить количество togTriggers необходимо?любой способ уменьшить количество togTriggers необходимо?

<script type="text/javascript"> 
    <!-- HIDE FROM OLD BROWSERS 
    /* <![CDATA[ */ 

    var oVTog = { 
     toggle: function (el) { 
      var container = el.parentNode; 
      var para = container.getElementsByTagName('p')[0]; 
      para.style.display = "none"; 

      var isClicked = false; 

      el.onmouseover = function() { 
       para.style.display = ''; 
       return false; 
      }; 
      el.onmouseout = function() { 
       if (!isClicked) 
        para.style.display = 'none'; 
       return false; 
      }; 
      el.onclick = function() { 
       // if it's clicked, change it to TRUE 
       // if it's clicked again, change it back to FALSE 

       isClicked = !isClicked; // toggle 

       para.style.display = ((isClicked) ? '' : 'none'); 
       return false; 
      }; 
     } 
    }; 
    window.onload = function() { 
     var l = document.getElementById('togTrigger'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger2'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger3'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger4'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger5'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger6'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger7'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger8'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger9'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger10'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger11'); 
     oVTog.toggle(l); 
    }; 

    /* ]]> */ 
    //END HIDING --> 
</script>

это, как я применить скрипт в теле в DIV (страница сделана из многих дивы внутри таблицы,/р не должно быть в пределах DIV, хотя, но он работает):

<a href="#" id="togTrigger"><i>text</i></a> 
     <p class="togContent"> 
     text 
     </p>

при наличии двух или более Textboxes в пределах одной и той же DIV, остальные togTriggers находятся в пределах диапазона:

<span><a href="#" id="togTrigger4"><i>text</i></a> 
     <p class="togContent"> 
     text 
     </p></span>

источник

2013-03-21 Martijn

Как насчет выбора по классу, а не идентификатора? То есть, если вы вместо этого сделаете все элементы id = 'togTriggerXX' в class = 'togTrigger'. Затем вы можете использовать document.querySelectorAll ('. TogTrigger') или document.getElementsByClassName ('togTrigger') (Преимущество первого заключается в том, что вы можете называть его элементом контейнера, поэтому вы только нацеливаете на него элементы. может также вызвать его в элементе документа, используя '#idContainer .toggleTriggerClassName'). Затем вы получите nodeList. Вы можете прокручивать список, вызывая oVTog.toggle для каждого элемента. – enhzflep

Мне нужен пример кода для этого, потому что мои знания javascript очень ограничены – Martijn

Как я уже упоминал, и как Мэтт указал более четко, вы можете обращаться к элементам программно - нет необходимости ссылаться на них по имени. Вот код, который делает трюк. (Вы можете игнорировать первое содержимое первого тега сценария - это вспомогательные функции, которые у меня есть в моем файле «blank.html» - файл, из которого растут все (мои) страницы)

Javascript массивы предлагают вам forEach функции, к сожалению, NodeLists нет. Вы можете увидеть, как я использовал его в myInit2. Хотя этот пример несколько надуманный - с каждым элементом происходит только одна вещь, я нашел, что это полезный шаблон - хотя и без анонимной (неназванной) функции, которая вызывается на каждом узле в NodeList.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 
function toggleClass(element, newStr) 
{ 
    index=element.className.indexOf(newStr); 
    if (index == -1) 
     element.className += ' '+newStr; 
    else 
    { 
     if (index != 0) 
      newStr = ' '+newStr; 
     element.className = element.className.replace(newStr, ''); 
    } 
} 
function forEachNode(nodeList, func) 
{ 
    var i, n = nodeList.length; 
    for (i=0; i<n; i++) 
    { 
     func(nodeList[i], i, nodeList); 
    } 
} 

window.addEventListener('load', mInit, false); 

function mInit() 
{ 
} 

</script> 

<script type="text/javascript"> 
    <!-- HIDE FROM OLD BROWSERS 
    /* <![CDATA[ */ 

    var oVTog = { 
     toggle: function (el) { 
      var container = el.parentNode; 
      var para = container.getElementsByTagName('p')[0]; 
      para.style.display = "none"; 

      var isClicked = false; 

      el.onmouseover = function() { 
       para.style.display = ''; 
       return false; 
      }; 
      el.onmouseout = function() { 
       if (!isClicked) 
        para.style.display = 'none'; 
       return false; 
      }; 
      el.onclick = function() { 
       // if it's clicked, change it to TRUE 
       // if it's clicked again, change it back to FALSE 

       isClicked = !isClicked; // toggle 

       para.style.display = ((isClicked) ? '' : 'none'); 
       return false; 
      }; 
     } 
    }; 


    window.addEventListener('load', yourInit, false); 
    window.addEventListener('load', myInit, false); 
    window.addEventListener('load', myInit2, false); 

    function yourInit() 
    { 
     // 2 lines per element to toggle. 200items = 400 lines 
     var l; 
     l = document.getElementById('togTrigger'); 
     oVTog.toggle(l); 

     l = document.getElementById('togTrigger4'); 
     oVTog.toggle(l); 
    }; 

    function myInit() 
    { 
     // 4 lines total. 200items = 4 lines 
     var containerDiv = document.getElementById('myMethod'); 
     var i, nodeList = containerDiv.getElementsByClassName('togTrigger'); 
     for (i=0; i<nodeList.length; i++) 
      oVTog.toggle(nodeList[i]); 
    }; 

    function myInit2() 
    { 
     var containerDiv = document.getElementById('mySecondMethod'); 
     var i, nodeList = containerDiv.getElementsByClassName('togTrigger'); 
     forEachNode(
         nodeList, 
         function(curItem, curIndex, ndeLst) 
         { 
          oVTog.toggle(curItem) 
         } 
        ); 
    }; 


    /* ]]> */ 
    //END HIDING --> 
</script> 

<style> 
</style> 
</head> 
<body> 
    <div id='yourMethod'> 
     <a href="#" id="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" id="togTrigger4"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 

    <div id='myMethod'> 
     <a href="#" class="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" class="togTrigger"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 

    <div id='mySecondMethod'> 
     <a href="#" class="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" class="togTrigger"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 
</body> 
</html>

источник

2013-03-21 12:28:33 enhzflep

Вы можете использовать цикл:

// Handle the first one separately because it doesn't have a number at the end 
var l = document.getElementById('togTrigger'); 
oVTog.toggle(l); 
for (var i=2;i< 12;i++){ 
    l = document.getElementById('togTrigger' + i); 
    oVTog.toggle(l); 
}

Также рассмотрите вопрос о назначении класса всем элементам togTrigger, выберите их, переверните их и вызовите oVTog.toggle.

источник

2013-03-21 10:53:02

Спасибо, мне что-то изменить, кроме числа 12, если количество элементов достигает 3 цифр? Редактировать: не работает, все поля теперь открыты – Martijn

@Martijn Нет, это то же самое с 3-мя цифрами. Он должен делать то же самое, что и код, который вы опубликовали, работал ли он раньше? –

Да, сценарий, который я написал, работает. – Martijn

любой способ уменьшить количество togTriggers необходимо?

ответ

Смежные вопросы