Запустите одну и ту же функцию для нескольких элементов - PullRequest
Новая
       8

Запустите одну и ту же функцию для нескольких элементов

0 голосов
/ 02 октября 2018

Я делаю галерею продуктов.Существует название продукта (h3), а затем параграф с описанием.У меня есть промежуток в середине, чтобы скрыть часть текста, если не выбран текст «ЧИТАТЬ БОЛЬШЕ».Проблема в том, что функция запускается для каждого продукта, а не только для одного, на который нажали.Если я выберу второй продукт, первый также будет переключен.

Вот HTML: 

<h3>
 PLS-CADD
</h3>
<p>The standard edition of PLS-CADD is a line design program that includes all the terrain, sag-tension, loads, clearances and drafting functions necessary for the design of an entire power
<span id="dots">...</span>
<span id="more">line. Also includes PLS-CADD/LITE and PLS-CADD/ULTRALITE, but not any of the other items listed below (compare editions).</span>
</p>
<a onclick="myFunction()" id="myBtn">Read more</a>

Вот CSS: 

#more {display: none;}

Вотфункция: 

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

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

    <h3>
  PLS-CADD
</h3>
<p>The standard edition of PLS-CADD is a line design program that includes all the terrain, sag-tension, loads, clearances and drafting functions necessary for the design of an entire power <span id="more1">line. Also includes PLS-CADD/LITE and PLS-CADD/ULTRALITE, but not any of the other items listed below (compare editions).</span></p>
<a onClick="showhide('more1')" id="myBtn">Read more</a>

Скрытый текст каждого последующего продукта будет иметь идентификаторы "more2, more3 и т. д. ...

Моя обновленная функция: 

    <script type="text/javascript" >
 function showhide(toggleID){
   var toggleDiv = document.getElementById(toggleID);
   if(toggleDiv.style.display = "none"){
    toggleDiv.style.display = 'block';
   }else {
    toggleDiv.style.display = 'none';
   }
 }
</script>

Каждое описание правильно расширяется, но я не могу их закрыть.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

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

  1. измените эти атрибуты идентификатора на атрибуты класса
  2. оберните каждую плитку продукта в <div>, присвойте каждому div уникальный атрибут id.
  3. Передача объекта события DOM в вашу функцию при нажатии кнопки
  4. Использование объекта события для доступа только к элементам в плитке, по которой щелкнули.

См. Прикрепленный фрагмент коданиже для рабочей версии.

Примечание: здесь вы должны использовать элемент <button> вместо тега привязки.Якорные теги должны использоваться только для перехода на разные страницы. 

function myFunction(e) {
  
  var product = e.target.parentElement;
  var dots = product.getElementsByClassName("dots")[0];
  var moreText = product.getElementsByClassName("more")[0];
  var btnText = product.getElementsByClassName("myBtn")[0];

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
.more {display: none;}
<div id="product1">
  <h3>PLS-CADD</h3>
  <p>The standard edition of PLS-CADD is a line design    program that includes all the terrain, sag-tension, loads, clearances and drafting functions necessary for the design of an entire power
  <span class="dots">...</span>
  <span class="more">line. Also includes PLS-CADD/LITE and PLS-CADD/ULTRALITE, but not any of the other items listed below (compare editions).</span>
  </p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>
</div>

<div id="product2">
  <h3>PLS-CADD</h3>
  <p>The standard edition of PLS-CADD is a line design    program that includes all the terrain, sag-tension, loads, clearances and drafting functions necessary for the design of an entire power
  <span class="dots">...</span>
  <span class="more">line. Also includes PLS-CADD/LITE and PLS-CADD/ULTRALITE, but not any of the other items listed below (compare editions).</span>
  </p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>
</div>

Надеюсь, это поможет!

0 голосов
/ 03 октября 2018

Если я правильно понимаю, у вас есть multiple элементы (карты в данном случае), для которых вы хотите запустить эту функцию?В этом случае вы не можете использовать id, потому что это используется для unique элементов или элементов, которые будут вызывать одну и ту же функцию.Вы должны использовать classes, так что это будет примерно так: 

HTML:
 <h3>
 PLS-CADD
</h3>
<p>The standard edition of PLS-CADD is a line design program that includes all the terrain, sag-tension, loads, clearances and drafting functions necessary for the design of an entire power
<span class="dots" id="card--one">...</span>
<span class="more" id="card--one">line. Also includes PLS-CADD/LITE and PLS-CADD/ULTRALITE, but not any of the other items listed below (compare editions).</span>
</p>
<a class="myBtn" id="card--one">Read more</a>

И скрипт будет выглядеть примерно так: 

const dots = document.querySelectorAll(".dots");
const more = document.querySelectorAll(".more");
const theButtons = document.querySelectorAll(".myBtn");

function myFunction() {
  more.forEach(more => {
    // THIS refers to the function caller - the button.
    if(this.id == more.id) {
       more.classList.toggle("more--active")
    }
   }

   dots.forEach(dots => {
     if(this.id == dots.id) {
       dots.classList.toggle("dots--hide")
     }
   }
}

theButtons.forEach(button => button.addEventListener("click", myFunction);

И CSS: 

.more{
   display: none;
}
.more--active{
   display: block;
}
.dots{
  display: inline-block;
 }
.dots--hide{
   display: none;
 }

Возможно, есть лучший способ и более динамичный способ сделать это, но это все, что я мог бы подумать на данный момент.Надеюсь, это будет полезно в определенной степени.

...