Vanilla JS замены для индексов jQuery () и eq () [дубликат]

На этот вопрос уже есть ответ здесь:



Я преобразую старые манипуляции DOM на основе jQuery на нашей веб-странице в ванильный javascript, большинство из которых прошло на удивление легко, но попали в стену с всплывающими меню.



Мы используем простой формат вкладок и скрытого меню дивы: 



 <div class="tab">tab 1</div>

 <div class="tab">tab 2</div>

 <div class="tab">tab 3</div>

 <div class="tab">tab 4</div>



 <div class="menu">menu 1</div>

 <div class="menu">menu 2</div>

 <div class="menu">menu 3</div>

 <div class="menu">menu 4</div>


Используется прежняя система на основе jQuery .index (), чтобы определить, какая вкладка была нажата, а затем.eq () для управления тем, какое скрытое меню было обнаружено.



Теперь мне интересно, как я мог бы сделать то же самое с vanilla javascript.



В худшем случае я мог бы переименовать классы как tab1, tab2, menu1, menu2 и написать отдельные сценарии для каждого, но мне понравилась гибкость, которую система index/eq предоставляла для добавления или удаления меню панели.



Спасибо

544   2  

2 ответов:

Прототипы для обоих созданы, имитируя функцииindex иeq jquery. Проверьте ниже ссылку на скрипку:

Рассмотрим ниже HTML 

<div class="menu">menu 1</div>
<div id='two' class="menu">menu 2</div>
<div class="menu">menu 3</div>
<div class="menu">menu 4</div>

Http://jsfiddle.net/w4hL4u6z/1/ 

function index(element){
    var sib = element.parentNode.childNodes;
    var n = 0;
    for (var i=0; i<sib.length; i++) {
         if (sib[i]==element) return n;
         if (sib[i].nodeType==1) n++;
    }
    return -1; 
}

alert(index.call(this,document.getElementById('two')));

function eq(index) {
   if(index>=0 && index < this.length)
    return this[index];
   else 
    return -1;
}
var e= document.getElementsByClassName('menu');
alert(eq.call(e,1).textContent);

Надеюсь, что это поможет, и вы можете взять его отсюда до ваших требований!

2  
2015-01-09 10:17:09

Хорошо, я приготовил скрипку: http://jsfiddle.net/cw0gpa7k/15/

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

var menus = document.getElementsByClassName('menu');
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < menus.length; i++)  {
    menus[i].index = i;
    tabs[i].isShown = false;
    menus[i].onclick = function() {
        if (!tabs[this.index].isShown) {
            tabs[this.index].style.display = 'block';
            tabs[this.index].isShown = true;
        }
        else {
            tabs[this.index].style.display = 'none';
            tabs[this.index].isShown = false;
        }

    }
}

Обратите внимание, что для подачи анонимной функции, подаваемой в onclick, я использую меню свойств[i].индекс = i; Это то, как вы кормите вещи через JavaScript. Добавить свойства к объектам DOM. Во всяком случае, именно этим я и занимаюсь. IsShow-это просто свойство флага, инициализированное сначала в false.

1  
2015-01-09 08:49:26

Comments

    Ничего не найдено.
Click here to cancel reply.