JS переключения для нескольких делений - PullRequest
Новая
       6

JS переключения для нескольких делений

0 голосов
/ 25 июня 2018

У меня есть 3 div, которые по умолчанию скрыты.Я хочу создать переключатель для этих 3, но я не хочу создавать onclick для каждого div и добавить его в файл js: 

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

Я пытался создать этот сценарий с clicked_id, но он не удался,Когда я щелкаю по третьему элементу div, второй также отображается. 

var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";

function displayFunction(clicked_id) {
    if (clicked_id == 1) {
        projectEen.style.display = "block";
    } else {
        projectTwee.style.display = "block";
    }  if(clicked_id == 3) {
        projectDrie.style.display = "block";
    } else {
      projectTwee.style.display = "none";
    }
}

Как использовать первый код, но чтобы отобразить все 3 элемента div без создания функции 3 раза?

EDIT: Мой HTML 

     <div id="1" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud"> content </div>

     <div id="2" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content </div>

     <div id="3" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content </div>

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Я бы попробовал что-то подобное в HTML: 

<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>

А для вашего JavaScript: 

function myFunction(element){

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

}
0 голосов
/ 25 июня 2018

Комбинируя document.getElementsByClassName и EventTarget.addEventListener , вы можете прикрепить один и тот же обработчик событий к вашим элементам div. Внутри этого обработчика вы можете получить элемент, по которому щелкнули, с помощью объекта event, предоставленного прослушивателем событий.

РЕДАКТИРОВАТЬ : HTML-код, который вы указали, несколько усложняет задачу, поскольку элементы projectTitel и projectInhoud не связаны друг с другом, кроме как по положению. Итак, чтобы отобразить правильный projectInhoud div, нам нужно найти следующий projectInhoud после projectTitel, по которому щелкнули.

  • Чтобы сделать вещи лучше, я бы предложил отредактировать HTML, чтобы projectTitel и projectInhoud делили потомков одного и того же родительского div.
  • Тем временем я добавил функцию getClickedProjectIndex, возвращающую индекс нажатой projectTitel div. И событие click использует этот индекс, чтобы показать правильное значение projectInhoud.
  • Затем вы можете использовать простую функцию toggle, которая отображает div, если он не виден, или скрывает его, если он виден. 

var divs = document.getElementsByClassName("projectTitel");

[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));

// by default, all projectInHound are hidden
hideElements("projectInhoud");


function handler(event) {
    // get the clicked project's index :
    var projectIndex = getClickedProjectIndex(event);

    // toggle the right projectInhoud div :
    toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}

// hide all elements that have the provided class name
function hideElements(className) {
    var elements = document.getElementsByClassName(className);

    [...elements].forEach(element => element.style.display = "none");
}

function getClickedProjectIndex(event) {
    var elements = document.getElementsByClassName("projectTitel");
    var projectIndex = 0;

    [...elements].forEach((element, index) => {
        if (element.id == event.currentTarget.id) {
            projectIndex = index;
        }
    });

    return projectIndex;
}

function toggleDiv(element) {

   if (element.style.display === 'none') {
      element.style.display = 'block';
   } else {
      element.style.display = 'none';
   }
}
<div id="1" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud" > content a</div>

     <div id="2" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content b</div>

     <div id="3" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content c</div>
...