Javascript нажмите на один элемент показывает его, нажмите на другой: скрыть первый и показать второй - PullRequest
Новая
       27

Javascript нажмите на один элемент показывает его, нажмите на другой: скрыть первый и показать второй

0 голосов
/ 21 января 2019

Я новичок здесь, я пытаюсь объяснить свою проблему как можно яснее.Я хочу сделать работу с индексом частью большой документации.У меня есть кнопки или ссылки (в данном случае в примере только div), названные от A до Z, и каждой букве принадлежит набор слов, начинающихся с выбранной буквы, например словарь.

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

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

Пожалуйста, помогите, можете ли выidea!

Мой код:

html: 

    <div onclick="openIndexA()">A</div>
    <div onclick="openIndexB()">B</div>
    <div onclick="openIndexC()">C</div>
    <!-- etc. -->

    <div class="letters" id="A">
        <p>A...1</p>
        <p>A...2</p>
        <p>A...3</p>
    </div>

    <div class="letters" id="B">
        <p>B...1</p>
        <p>B...2</p>
        <p>B...3</p>
    </div>

    <div class="letters" id="C">
        <p>C...1</p>
        <p>C...2</p>
        <p>C...3</p>
    </div>
    <!-- etc. -->

css: 

.letters {
    display: none;
}

в openIndex.js: 

function openIndexA() {
  var x = document.getElementById("A");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function openIndexB() {
  var x = document.getElementById("B");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function openIndexC() {
  var x = document.getElementById("C");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<!-- etc. -->

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

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Посмотрите это fiddle ! 

var openIndex = document.querySelectorAll('.openindex');
var letters = document.querySelectorAll('.letters');

openIndex.forEach(function(el){
    el.addEventListener('click', function(){
        letters.forEach(function(e){
            e.classList.remove('show');
        });
        var id = el.getAttribute('data-id');
        document.getElementById(id).classList.add('show');
      });
});

и добавьте этот класс CSS 

.show {
    display: block;
}
0 голосов
/ 21 января 2019

Вот решение и несколько советов: 

function openIndex(id) {
  document.querySelectorAll('.letters').forEach(elt => elt.classList.remove('active'));
  document.querySelector('#'+id).classList.add('active');
}
.letters {
    display: none;
}

.letters.active {
    display: block;
}
<div onclick="openIndex('A')">A</div>
    <div onclick="openIndex('B')">B</div>
    <div onclick="openIndex('C')">C</div>
    <!-- etc. -->

    <div class="letters" id="A">
        <p>A...1</p>
        <p>A...2</p>
        <p>A...3</p>
    </div>

    <div class="letters" id="B">
        <p>B...1</p>
        <p>B...2</p>
        <p>B...3</p>
    </div>

    <div class="letters" id="C">
        <p>C...1</p>
        <p>C...2</p>
        <p>C...3</p>
    </div>
    <!-- etc. -->

Для вашего CSS: не работайте напрямую со стилем, используйте как можно больше классов.

Здесь, какВы можете видеть, я добавил класс active.Если я добавлю его, он будет редактировать стиль.

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

ЗдесьЯ сделал следующее: передайте идентификатор, который вы хотите активировать в качестве параметра.Затем я беру все предметы letters и удаляю класс active.Затем, только для выбранного, я добавляю класс active.

Надеюсь, это понятно и поможет вам:)

...