Как изменить стиль на другом элементе, используя Javascript с нодлистом - PullRequest
Новая
       25

Как изменить стиль на другом элементе, используя Javascript с нодлистом

0 голосов
/ 26 сентября 2018

Нужна помощь с использованием js-скрипта. 

<ul class="producers-links">
    <li class="section_All active-producer">A-Z</li>
    <li class="section_0-9">0-9</li>
    <li class="section_A">A</li>
    <li class="section_B">B</li>
    <li class="section_C">C</li>
</ul>

И 

 <div class="producers-list">
    <div class="producers-container" id="producers-0-9">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container" id="producers-A">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container" id="producers-B">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container" id="producers-C">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>

Как создать js-скрипт, который позволит пользователю нажимать на элемент списка, тогда все дивы из списка производителей будутполучить отображение: нет без этого, который был нажат в списке. 

    var producersList = document.querySelectorAll('ul.producers-links>li');
    var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            var index = 0,
                length = producersList.length;
            for (; index < length; index++) {
                producersLists[index].style.display = "none";
            }
        });

    }

Это позволяет мне скрывать все элементы из контейнера-продюсера, но я не знаю, как отобразить только один элемент, щелкнувший ранее в списке.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

При нажатии вы можете последовательно:- скрыть все- выберите тот, у которого конец идентичного идентификатора совпадает с textContent выбранного элемента (или выберите все, если текст AZ)

var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');

// add eventlistener...
producersList.forEach(x => {
  x.addEventListener("click", x => {
    hideAll();
    
    document.querySelector('.active-producer').classList.remove('active-producer');
    
    x.target.classList.add('active-producer');
    
    const txt = x.target.textContent;
    
    selectForText(txt);
  });
});

// hide/show all...
function hideAll(bShow) {
  const cl = bShow === true?"block":"none";
  producersLists.forEach(x => x.style.display = cl);
}

// select for text...
function selectForText(txt) {
  if(txt === "A-Z") {
    // select all...
    hideAll(true);
    return;
  }
  
  // the [...nodelist] part allows to 'cast' to proper array, and to have access to find() function...
  const found = [...producersLists].find(q => q.id.split("producers-")[1] === txt);
  
  if(found) {
    found.style.display = "block";
  }
  else {
    // ???
  }
}
.active-producer {
  color: #19f;
}
<ul class="producers-links">
    <li class="section_All active-producer">A-Z</li>
    <li class="section_0-9">0-9</li>
    <li class="section_A">A</li>
    <li class="section_B">B</li>
    <li class="section_C">C</li>
</ul>
And

 <div class="producers-list">
    <div class="producers-container" id="producers-0-9">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container" id="producers-A">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container" id="producers-B">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container" id="producers-C">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>
0 голосов
/ 26 сентября 2018

Прежде всего вы должны использовать классы вместо идентификатора во втором списке, чтобы иметь возможность добавлять больше процедур в будущем

попробуйте это: 

<ul class="producers-links">
    <li id="section_All" class="active-producer">A-Z</li>
    <li id="section_0-9">0-9</li>
    <li id="section_A">A</li>
    <li id="section_B">B</li>
    <li id="section_C">C</li>
</ul>

<div class="producers-list">
    <div class="producers-container section_0-9 section_All">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container section_A section_All">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container section_B section_All">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container section_C section_All">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>


    var producersList = document.querySelectorAll('ul.producers-links > li');
    var producersLists = document.querySelectorAll('.producers-container');

    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            for (var index = 0; index < producersLists.length ; index++) {

                var currElement = producersLists[index];
                var hide = !currElement.classList.contains(this.id);
                producersLists[index].style.display =  hide? "none" : "block";
            }
        });

    }
...