当按钮切换时显示/隐藏单独的文本部分

提问者：小点点

当按钮切换时显示/隐藏单独的文本部分

所以我有一个显示/隐藏切换按钮工作到我的喜欢。

当我在隐藏/显示细节之间切换时，我还设法让图像图标-眼改变（打开和关闭）。

你看。。。？当我切换按钮本身时，按钮的值属性也在改变。

现在，我有两个不同的文本部分。我想单独切换隐藏/显示这些文本部分。但是，当我切换到“隐藏”文本在Brief-II，文本在Brief-I是隐藏的！讨厌！我尝试给他们不同的ID，并将更改后的ID合并到脚本中。就是不管用！救命啊！

你也可以摆弄我的代码。我需要帮助的问题在那里也有详细说明。

<body>
  <h1>So many problems to solve</h1>
  
<div class="spec-proj-briefshowhide">
  <h2>Hello! this is the first problem. This is just the beginning to an unending greed.</h2>
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - I:</p>
  <ul>
    <li>So I have this show/hide toggle button working to my liking.</li>
    <li>I also managed to get the eye to open and close when I toggle between hide/show details.</li>
    <li>You see..? I have the value attribute of the button changing as I click on it to toggle too.</li>
    <li>Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.</li>
    <li>For now, even if I toggle to hide the text for brief -II, text for brief - I is hidden.</li>
    <li>I tried giving them different ids and to incorporate it into the script. It just doesnt work for me.</li>
</ul>
</div>
</div>
</div>
<h2>Here comes the second issue of the evil eye and the sleepy eye.</h2>
  <div class="spec-proj-briefshowhide">
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - II:</p>
  <ul>
    <li>The second issue is to incorporate the toggle feature to the eye(s).</li>
    <li>So when I click an open eye, I would like it to hide the text details and, simultaneously change the value of the adjacent button to 'Show details'.</li>
    <li>This should occur individually and for each section of text (meaning individually and seperately for Brief - I and Brief - II).</li>
    <li>I have a feeling that this would make it easy for people to visually recognise if the text is hidden or open.</li>
    <li>This hide/Show drama is to just save on screen real estate.</li>
    <li>Help needed!</li>
</ul>
</div>
</div>
</div>
  
</body>

body{
  margin:3em;
  background: #262626;
  color: #f7f7f2;
  font-family: Helvetica;
  font-size:0.8em;
  line-height:2;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

.spec-proj-briefshowhide {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-left: 3em;
           padding-right: 3em;
  border-bottom: 0.05em solid #f7f7f2;
       }



       .spec-proj-briefshowhide input {
           padding: 0.5em;
           color: #01BAEF;
           font-size: 0.8em;
           font-weight: 400;
           text-transform: uppercase;
           cursor: pointer;
           background-color: #262626;
           border: 0.05em solid #01BAEF;
           border-radius: 0.1em;
           outline: none;
       }


       .showhide-buttons-icons img {
           max-width: 3em;
           vertical-align: middle;
           padding-left: 2em;
           padding-right: 2em;
           align-self: flex-start;
       }

function toggle(ele) {
            var cont = document.getElementById('proj-details');
            if (cont.style.display == 'flex') {
                cont.style.display = 'none';

                document.getElementById(ele.id).value = 'Show details';
            } else {
                cont.style.display = 'flex';
                document.getElementById(ele.id).value = 'Hide details';
            }
        }

function changeImage() {
            var image = document.getElementById('opencloseeye');
            if (image.src.match("https://i.ibb.co/NjRDMFS/OPENEYE.png")) {
                image.src = "https://i.ibb.co/yPhD6HF/CLOSEEYE.png";
            } else {
                image.src = "https://i.ibb.co/NjRDMFS/OPENEYE.png";
            }
        }

共2个答案

匿名用户

id在同一个HTML文档中应该是唯一的，或者，如果要重用同一个“名称”，则应该在类中指定它们。

对于上述情况，最简单的解决方法是给你的简报不同的id，然后在切换函数中传递id以进行切换。

即在HTML中有两个id部分proj-details-1和proj-details-2。

然后，对于您的切换，您可以传入需要切换的id。 <代码>。。。 onclick=“切换（this，'proj-details-1')；。。。”。另一个按钮将具有不同的ID。

在切换函数中:

function toggle(ele, projId) {
  var cont = document.getElementById(projId);
  ....
}

实现这一点的其他方法可能是遍历DOM以查看同级节点，但上面的方法将满足您的需要。

匿名用户

主要的问题是，你使用了“id”，但它不适合多个元素，因为它应该是唯一的，所以只需用类替换它，并在函数中针对你点击的元素（这里有一个点击处理程序）。

只是对你的例子做了一些修正；

<body>
  <h1>So many problems to solve</h1>

  <div class="spec-proj-briefshowhide">
    <h2>Hello! this is the first problem. This is just the beginning to an unending greed.</h2>
    <div class="showhide-buttons-icons">
      <p><img class="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
        <input type="button" value="Hide details" class="bt" onclick="toggle(this); changeImage(this);"></p>
    </div>
    <div style="display:flex;" class="proj-details">
      <div class="smodpvproject-brief">
        <p>Brief - I:</p>
        <ul>
          <li>So I have this show/hide toggle button working to my liking.</li>
          <li>I also managed to get the eye to open and close when I toggle between hide/show details.</li>
          <li>You see..? I have the value attribute of the button changing as I click on it to toggle too.</li>
          <li>Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.</li>
          <li>For now, even if I toggle to hide the text for brief -II, text for brief - I is hidden.</li>
          <li>I tried giving them different ids and to incorporate it into the script. It just doesnt work for me.</li>
        </ul>
      </div>
    </div>
  </div>
  
  <h2>Here comes the second issue of the evil eye and the sleepy eye.</h2>
  <div class="spec-proj-briefshowhide">
    <div class="showhide-buttons-icons">
      <p>
        <img class="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
        <input type="button" value="Hide details" class="bt" onclick="toggle(this); changeImage(this);">
     </p>
    </div>
    <div style="display:flex;" class="proj-details">
      <div class="smodpvproject-brief">
        <p>Brief - II:</p>
        <ul>
          <li>The second issue is to incorporate the toggle feature to the eye(s).</li>
          <li>So when I click an open eye, I would like it to hide the text details and, simultaneously change the value of the adjacent button to 'Show details'.</li>
          <li>This should occur individually and for each section of text (meaning individually and seperately for Brief - I and Brief - II).</li>
          <li>I have a feeling that this would make it easy for people to visually recognise if the text is hidden or open.</li>
          <li>This hide/Show drama is to just save on screen real estate.</li>
          <li>Help needed!</li>
        </ul>
      </div>
    </div>
  </div>

 <script>
function toggle(el) {
  // you need to find an '.proj-details' block relatively to a 'this' element (to button)
  const cont = el.parentNode.parentNode.nextElementSibling;
  
  if (cont.style.display == "flex") {
    cont.style.display = "none";
    // you already have a current element which is passed in a function, so you can just change a value
    el.value = "Show details"
  } else {
    cont.style.display = "flex";
    el.value = "Hide details"
  }
}

function changeImage(el) {
  // save here, relative to an element which you click
  const image = el.previousElementSibling;
  
  if (image.src.match("https://i.ibb.co/NjRDMFS/OPENEYE.png")) {
    image.src = "https://i.ibb.co/yPhD6HF/CLOSEEYE.png";
  } else {
    image.src = "https://i.ibb.co/NjRDMFS/OPENEYE.png";
  }
}
 </script>

</body>