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

如果我正确理解了这一点，则您有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属性更改为类属性
将每个产品图块包裹在<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>

希望这会有所帮助！

对多个元素运行相同的功能

2 个答案: