对多个元素运行相同的函数

Question

我在做一个产品画廊。有一个产品的标题(一个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>

每个后续产品的隐藏文本都有ID "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>

每个描述都有适当的扩展，但我无法关闭它们。

Answer 1

看来你在这有几个问题。您正在尝试使用相同的id呈现多个元素，这是不允许的。相反，请尝试以下几点：

1. 将这些id属性更改为类属性
2. 将每个产品块包装在一个<div>中，给每个div一个唯一的id属性。
3. 单击按钮时将DOM事件对象传递给函数
4. 使用event只访问单击的瓷砖中的元素。

有关工作版本，请参阅下面附加的代码段。

附带注意:您应该在这里使用<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>

​

希望这能有所帮助！

Answer 2

如果我正确理解了这一点，那么您有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;
 }

也许有更好的方法和更有活力的方法来做这件事，但这是我现在所能想到的。希望这能在一定程度上有所帮助。