运行多个元素同一个函数

Question

我正在制作产品图库。有一个产品标题（一个 h3），然后是一个带有描述的段落。我在中间有一个跨度来隐藏部分文本，除非 "READ MORE" 文本是 selected。问题是该功能针对每个产品运行，而不仅仅是点击的产品。如果我select第二个产品，第一个也被切换。

这里是 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

如果我没理解错的话，您有 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;
 }

可能有更好的方法和更动态的方法来执行此操作，但目前我只能想到这些。希望这会在一定程度上有所帮助。

Answer 2

看来您遇到了一些问题。您正在尝试呈现具有相同 ID 的多个元素，这是不允许的。请尝试以下操作：

将这些 id 属性更改为 class 属性
将每个产品图块包装在 <div> 中，给每个 div 一个唯一的 id 属性。
单击按钮时将 DOM 事件对象传递给您的函数
使用事件对象仅访问被单击的磁贴中的元素。

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

旁注：您应该在此处使用 <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>

希望对您有所帮助！

运行多个元素同一个函数

Run the same function for multiple elements

html

javascript

function

squarespace

运行 多个元素同一个函数

Run the same function for multiple elements

html

javascript

function

squarespace

运行多个元素同一个函数