所以我有这个显示/隐藏切换按钮，可以随心所欲地工作。
当我在隐藏/显示细节之间切换时，我还设法让图像图标眼睛改变(打开和关闭(。
你看到了吗。。。？当我切换按钮本身时，按钮的值属性发生了变化。
现在，我有两个不同的文本部分。我想单独切换隐藏/显示这些文本部分。但是，当我切换到"隐藏"简短的文本时——II，简短的文本——我被隐藏了！恶心！我尝试给他们不同的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";
}
}
主要问题是您使用"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>
id在同一HTML文档中应该是唯一的，或者如果重用相同的"名称"，则应该在class中指定它们。
对于上面的问题，最简单的解决方法是给你的内裤不同的id，然后在toggle函数中传递id以进行切换。
即。您的HTML中有两个id为proj-details-1和proj-details-2的部分。
然后，对于切换，您可以传入需要切换的id。... onclick="toggle(this, 'proj-details-1'); ..."。另一个按钮将具有不同的id。
在您的切换功能中：
function toggle(ele, projId) {
var cont = document.getElementById(projId);
....
}
其他方法可以是遍历DOM来查看同级节点，但以上内容将满足您的需要。