показать / скрыть несколько элементов div без определения идентификатора элемента div - PullRequest
Новая
       1

показать / скрыть несколько элементов div без определения идентификатора элемента div

0 голосов
/ 08 ноября 2018

сначала прошу прощения за плохой английский / грамматику

создаю что-то, где вы показываете и скрываете.

но моя проблема в том, что когда я нажимаю показать / скрыть, на обеих кнопках появляется только поле ввода 1 и я хочу, чтобы он показывал / скрывал каждую коробку.

Моя проблема в том. Я не хочу использовать идентификатор, чтобы определить элемент Показать / Скрыть потому что, если у меня более 10 div с полями ввода, я должен определить их все с помощью getElementById, я не хочу этого.

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

function myFunction(event) {
            var x = document.getElementById("mydv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            
            x.parentNode.insertBefore(x, event.target.nextSibling);
        }
        document.addEventListener('click', function(event){
        	if(event.target.className.includes("dv1")){
          	myFunction(event);
          }
        });
<!DOCTYPE html>
    <html>
    <head>
    <title> SHOW / Hide </title>
    </head>
    <body>
    <ul>
    <li>
    <div id="mydv" style="display:none;">	
    <p>input box 1
      <input type="text" name="textfield">
    </p>
    </div>
      <button class="dv1">SHOW/HIDE</button>
     </li>
     
     <li><div id="mydv" style="display:none;">	
      <p>input box 2
      <input type="text" name="textfield">
    </p> 
    </div>
      <button class="dv1">SHOW/HIDE</button></li>
    </ul>
    
    </body>
    
    </html>

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Проблема в том, что getElementById ссылается на первый элемент с этим идентификатором. Это просто игнорирует все остальное. Использование одного и того же идентификатора для более чем одного элемента - плохая практика. Идентификатор должен быть уникальной ссылкой на этот элемент, вместо этого используйте класс.

0 голосов
/ 08 ноября 2018

Короткий и ленивый ответ на ваши проблемы - если вы собираетесь сохранить свою текущую иерархию, вы можете просто найти тег DIV внутри вашего LI parentNode (поскольку он является единственным тегом DIV).

В основном это выглядит так - нажатие кнопки -> изменить фокус с кнопки на parentNode LI -> находит DIV.

короче - в function myFunction(event) изменить 

var x = document.getElementById("mydv");

до 

var x = event.target.parentNode.getElementsByTagName("DIV")[0];

Рабочий пример: https://jsfiddle.net/w2a9zg46/1/

0 голосов
/ 08 ноября 2018

Если вы хотите указать элемент на странице, который может быть во всех отношениях похож на другие элементы, кроме, возможно, текстового содержимого или чего-то еще, в действительности вам нужен идентификатор, поскольку именно так JavaScript определяет уникальный элемент.

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

Затем вы можете вызвать функцию и просто передать «this» в качестве аргумента.

HTML: 

<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>

JavaScript: 

<script>

function hideShow(elem){

  var ele = document.getElementById(elem.getAttribute("rel"));

  if(ele.style.display == "none"){
    ele.style.display = "block";
  }
  else{
  ele.style.display = "none";
  }

}

</script>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...