Как я могу l oop через div? - PullRequest
Новая
       0

Как я могу l oop через div?

0 голосов
/ 06 мая 2020

Я пытаюсь не повторять код:

Вот мой html код: 

<body>
    <div class="container-fluid text-center" id="show">
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/baratheon.png" alt="baratheon" id="17">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/lannister.jpg" alt="lannister" id="229">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/stark.jpg" alt="stark" id="362">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/targaryen.jpg" alt="targaryen" id="378">
        </div>

        <div class="container bg-light text-left" id="house_details">
            <h3>House Details</h3>
            <p id="house_name"> </p>
            <p id="house_words"> </p>
            <p id="house_title"> </p>
        </div>
    </div>

    <script src="/GoT/got.js"></script>
</body>

, а вот мой javascript код: 

$('#house_details').hide();

document.getElementById('17').addEventListener('click', displayInfo);

function displayInfo() {
    $('#house_details').toggle();

    let house_name = document.getElementById('house_name');
    let house_words = document.getElementById('house_words');
    let house_title = document.getElementById('house_title');

    fetch('https://anapioficeandfire.com/api/houses/17/')
        .then((response) => response.json())
        .then(({ name, words, titles }) => {
            house_name.textContent = `Name: ${name}`;
            house_words.textContent = `Words: ${words}`;
            house_title.textContent = `Words: ${titles}`;
        });
}

document.getElementById('229').addEventListener('click', displayInfo);

function displayInfo() {
    $('#house_details').toggle();

    let house_name = document.getElementById('house_name');
    let house_words = document.getElementById('house_words');
    let house_title = document.getElementById('house_title');

    fetch('https://anapioficeandfire.com/api/houses/229/')
        .then((response) => response.json())
        .then(({ name, words, titles }) => {
            house_name.textContent = `Name: ${name}`;
            house_words.textContent = `Words: ${words}`;
            house_title.textContent = `Words: ${titles}`;
        });
}

Как я могу добиться, чтобы код не повторялся 4 раза, но при этом отображался идентификатор изображения и идентификатор выборки? Я пробовал l oop, но результат не совсем правильный!

Я ценю каждый ответ! Спасибо

Ответы [ 5 ]

0 голосов
/ 06 мая 2020

Вы можете использовать data-val для передачи идентификатора, например: 

<div class="card d-inline-block ">
    <img data-id="17" class="card-img-bottom" src="/GoT/houseimgs/baratheon.png" alt="baratheon">
</div>

И добавить слушателя ко всем изображениям карты по className 

document.getElementById('card-img-bottom').addEventListener('click', displayInfo);

Полный список кодов ниже 

<body>
    <div class="container-fluid text-center" id="show">
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/baratheon.png" alt="baratheon" data-id="17">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/lannister.jpg" alt="lannister" data-id="229">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/stark.jpg" alt="stark" data-id="362">
        </div>
        <div class="card d-inline-block ">
            <img class="card-img-bottom" src="/GoT/houseimgs/targaryen.jpg" alt="targaryen" data-id="378">
        </div>

        <div class="container bg-light text-left" id="house_details">
            <h3>House Details</h3>
            <p id="house_name"> </p>
            <p id="house_words"> </p>
            <p id="house_title"> </p>
        </div>
    </div>

    <script src="/GoT/got.js"></script>
</body>

js код 

    const cards = document.getElementsByClassName('card-img-bottom');

    Array.from(cards).forEach((item) => {
      item.addEventListener('click', displayInfo);
    });

    function displayInfo() {
      $('#house_details').toggle();

      let house_name = document.getElementById('house_name');
      let house_words = document.getElementById('house_words');
      let house_title = document.getElementById('house_title');

      const id = this.dataset.id;
      fetch(`https://anapioficeandfire.com/api/houses/${id}/`)
        .then((response) => response.json())
        .then(({ name, words, titles }) => {
          house_name.textContent = `Name: ${name}`;
          house_words.textContent = `Words: ${words}`;
          house_title.textContent = `Words: ${titles}`;
        });
    }
0 голосов
/ 06 мая 2020

Я полагаю, когда вы нажимаете на теги изображений. Вы хотите запустить displayInfo () и отобразить контейнер с идентификатором house_details. Например, ради вы показали нам только код для двух тегов изображений ?. В вашем коде нет необходимости добавлять прослушиватель событий к каждому тегу изображения.

И я бы посоветовал не использовать vanilla javascript и jQuery вместе. сделайте это так: 

<body>
<div class="container-fluid text-center" id="show">
    <div class="card d-inline-block ">
        <img class="card-img-bottom house" src="/GoT/houseimgs/baratheon.png" alt="baratheon" id="17">
    </div>
    <div class="card d-inline-block ">
        <img class="card-img-bottom house" src="/GoT/houseimgs/lannister.jpg" alt="lannister" id="229">
    </div>
    <div class="card d-inline-block">
        <img class="card-img-bottom house" src="/GoT/houseimgs/stark.jpg" alt="stark" id="362">
    </div>
    <div class="card d-inline-block ">
        <img class="card-img-bottom house" src="/GoT/houseimgs/targaryen.jpg" alt="targaryen" id="378">
    </div>

    <div class="container bg-light text-left" id="house_details">
        <h3>House Details</h3>
        <p id="house_name"> </p>
        <p id="house_words"> </p>
        <p id="house_title"> </p>
    </div>
</div>

<script src="/GoT/got.js"></script>

Добавьте одинаковые классы к каждому тегу изображения и добавьте прослушиватель событий к тем, что в jQuery, например: 

  $('#house_details').hide();

$(".house).click(displayInfo)

function displayInfo() {
    $('#house_details').toggle();

    let house_name = $('#house_name');
    let house_words =$('#house_words');
    let house_title = $('#house_title');
    let id = $(this).attr("id");  //get id of whichever image tag you  click on

    fetch(`https://anapioficeandfire.com/api/houses/${id}/`) //use the id here
        .then((response) => response.json())
        .then(({ name, words, titles }) => {
            house_name.textContent = `Name: ${name}`;
            house_words.textContent = `Words: ${words}`;
            house_title.textContent = `Words: ${titles}`;
        });
}

Не кодируйте массив, который содержит все ваши идентификаторы, которые вы хотите передать oop через. Просто возьмите идентификатор тега изображения, который вы нажимаете, следуя приведенному выше коду.

0 голосов
/ 06 мая 2020 
let divArr = [17, 229, 362, 378];
for (var i=0; i<divArr.lendth(); i++){
   document.getElementById(divArr[i]).addEventListener('click', displayInfo(divArr[i]);
}
function displayInfo(id) {
  $('#house_details').show();

  let house_name = document.getElementById('house_name');
  let house_words = document.getElementById('house_words');
  let house_title = document.getElementById('house_title');
 fetch(`https://anapioficeandfire.com/api/houses/${id}/`)
    .then((response) => response.json())
    .then(({
      name,
      words,
      titles
    }) => {
      house_name.textContent = `Name: ${name}`;
      house_words.textContent = `Words: ${words}`;
      house_title.textContent = `Words: ${titles}`;
    });
}
0 голосов
/ 06 мая 2020

мы можем провести рефакторинг кода

Переместить повторно используемый объект из вашего метода 

 let house_name = document.getElementById('house_name');
    let house_words = document.getElementById('house_words');
    let house_title = document.getElementById('house_title');

создать метод многократного использования с параметром 

function displayInfo(id) {

  $('#house_details').toggle();

  fetch(`https://anapioficeandfire.com/api/houses/${id}/`)
    .then((response) => response.json())
    .then(({ name, words, titles }) => {
        house_name.textContent = `Name: ${name}`;
        house_words.textContent = `Words: ${words}`;
        house_title.textContent = `Words: ${titles}`;
    });
}

Зарегистрируйте событие клика, например ниже 

   let id = 17 ;
   document.getElementById(id).addEventListener('click', displayInfo.bind(this,id));
   id = 229;
   document.getElementById(id).addEventListener('click', displayInfo.bind(this,id));
0 голосов
/ 06 мая 2020

Как следует из комментария Lain, просто извлеките идентификатор из цели события щелчка и используйте его в качестве переменной в функции, например: 

$('#house_details').hide();

let ids = [17, 229, 362, 378];
for (let i=0; i<ids.length; i++) {
   document.getElementById(ids[i]).addEventListener('click', displayInfo);
}


function displayInfo() {
  $('#house_details').show();

  let house_name = document.getElementById('house_name');
  let house_words = document.getElementById('house_words');
  let house_title = document.getElementById('house_title');

  fetch(`https://anapioficeandfire.com/api/houses/${this.id}/`)
    .then((response) => response.json())
    .then(({
      name,
      words,
      titles
    }) => {
      house_name.textContent = `Name: ${name}`;
      house_words.textContent = `Words: ${words}`;
      house_title.textContent = `Words: ${titles}`;
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="container-fluid text-center" id="show">
    <div class="card d-inline-block ">
      <img class="card-img-bottom" src="/GoT/houseimgs/baratheon.png" alt="baratheon" id="17">
    </div>
    <div class="card d-inline-block ">
      <img class="card-img-bottom" src="/GoT/houseimgs/lannister.jpg" alt="lannister" id="229">
    </div>
    <div class="card d-inline-block ">
      <img class="card-img-bottom" src="/GoT/houseimgs/stark.jpg" alt="stark" id="362">
    </div>
    <div class="card d-inline-block ">
      <img class="card-img-bottom" src="/GoT/houseimgs/targaryen.jpg" alt="targaryen" id="378">
    </div>

    <div class="container bg-light text-left" id="house_details">
      <h3>House Details</h3>
      <p id="house_name"> </p>
      <p id="house_words"> </p>
      <p id="house_title"> </p>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...