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

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. 使用事件对象仅访问已单击磁贴中的元素。

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

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

可能有更好的方法和更动态的方法可以做到这一点，但这就是我现在所能想到的。希望这在一定程度上有所帮助。