主页 / 问题 / 1546985
Accepted
drako black
Asked:2023-10-20 20:12:55 +0000 UTC2023-10-20 20:12:55 +0000 UTC

根据单击的 HTML 元素更改元素属性

  • 772

朋友们，这就是问题所在：有3个div元素：div1、div2和div3。在 div1 和 div2 中有 2 个按钮（b1、b2、b3、b4），在 div3 中有 1 个按钮（b5）。默认情况下：div2和div 3被visibility属性隐藏，div1可见。分别在 div1 和 div2 中使用按钮 b1 和 b2，可以将 div1 和 div2 之间的可见性状态更改为相反的状态，按钮 b3 和 b4 允许您使 div1 和 div2 不可见，而 div3 可见。然后我的问题是：我需要当您单击按钮 b5 时，div3 被隐藏，并且使 div3 可见的 div（div1 或 div2）变得可见。我的推理是，需要记住单击使 div3 可见的按钮，然后当单击 b5 时，将交换相应的属性。但结果是，div1 总是启动的。

这是代码：

html:

<div id="d1" style="visibility: active;">
<p><button id="b1" onclick="fun11()">1.1</botton></p>
<p><button id="b2" onclick="fun12()">1.2</botton></p>
</div>
<div id="d2" style="visibility: hidden;">
<p><button id="b3" onclick="fun21()">2.1</botton></p>
<p><button id="b4" onclick="fun12()">2.2</botton></p>
</div>
<div id="d3" style="visibility: hidden;">
<p><button id="b5" onclick="fun3()">3</botton></p>
</div>

js

function fun11() {
document.getElementById('d1').style.visibility = 'hidden';
document.getElementById('d2').style.visibility = 'visible';
}

function fun12() {
document.getElementById('d1').style.visibility = 'hidden';
document.getElementById('d2').style.visibility = 'hidden';
document.getElementById('d3').style.visibility = 'visible';
}

function fun21() {
document.getElementById('d2').style.visibility = 'hidden';
document.getElementById('d1').style.visibility = 'visible';
}

function fun3() {
document.getElementById('d3').style.visibility = 'hidden';
If (document.getElementById('b2').onclick = true) {
document.getElementById('d1').style.visibility = 'visible';
} 
elseif (document.getElementById('b4').onclick = true) {
document.getElementById('d2').style.visibility = 'visible';
}
}

那么我做错了什么？

javascript

2 个回答

  1. 我稍微重写了你的版本

    let parentId;

function fun11() {
    document.getElementById('d1').style.visibility = 'hidden';
    document.getElementById('d2').style.visibility = 'visible';
}

function fun12(el) {
    document.getElementById('d1').style.visibility = 'hidden';
    document.getElementById('d3').style.visibility = 'visible';
    parentId = el.parentNode.id;
}

function fun21() {
    document.getElementById('d2').style.visibility = 'hidden';
    document.getElementById('d1').style.visibility = 'visible';
}

function fun22(el) {
    document.getElementById('d2').style.visibility = 'hidden';
    document.getElementById('d3').style.visibility = 'visible';
    parentId = el.parentNode.id;
}

function fun3() {
    document.getElementById('d3').style.visibility = 'hidden';
    document.getElementById(parentId).style.visibility = 'visible';
}
    <div id="d1" style="visibility: active;">
    <button id="b1" onclick="fun11()">1.1</button>
    <button id="b2" onclick="fun12(this)">1.2</button>
</div>
<div id="d2" style="visibility: hidden;">
    <button id="b3" onclick="fun21()">2.1</button>
    <button id="b4" onclick="fun22(this)">2.2</button>
</div>
<div id="d3" style="visibility: hidden;">
    <button id="b5" onclick="fun3()">3</button>
</div>

    更新：如果按钮位于段落标签中

    <script>
let parentId;

function fun11() {
    document.getElementById('d1').style.visibility = 'hidden';
    document.getElementById('d2').style.visibility = 'visible';
}

function fun21() {
    document.getElementById('d2').style.visibility = 'hidden';
    document.getElementById('d1').style.visibility = 'visible';
}

function fun12() {
    let d1 = document.getElementById('d1');
    parentId = d1.id; d1.style.visibility = 'hidden';
    document.getElementById('d3').style.visibility = 'visible';
}

function fun22() {
    let d2 = document.getElementById('d2');
    parentId = d2.id; d2.style.visibility = 'hidden';
    document.getElementById('d3').style.visibility = 'visible';
}

function fun3() {
    document.getElementById('d3').style.visibility = 'hidden';
    document.getElementById(parentId).style.visibility = 'visible';
}
</script>

<div id="d1" style="visibility: visible;">
    <p><button id="b1" onclick="fun11()">1.1</button></p>
    <p><button id="b2" onclick="fun12()">1.2</button></p>
</div>
<div id="d2" style="visibility: hidden;">
    <p><button id="b3" onclick="fun21()">2.1</button></p>
    <p><button id="b4" onclick="fun22()">2.2</button></p>
</div>
<div id="d3" style="visibility: hidden;">
    <p><button id="b5" onclick="fun3()">3</button></p>
</div>
    • 1
  2. Best Answer

    我找到了我的问题的解决方案。为此，我们必须使用 Element.closest() 方法。我们将一个条件附加到第一个按钮，并检查第一个父元素。如果它与给定的 id 匹配（在我的例子中），我们就会为给定的变量分配一个特定的值（例如，1）。然后，在第二个中，我们简单地检查给定变量的值，并根据给定的结果返回 div1 或 div2。如果有更多的元素，这个功能还可以扩展。

    let parentId;

function fun11() {
    document.getElementById('d1').style.visibility = 'hidden';
    document.getElementById('d2').style.visibility = 'visible';
}

function fun12(el) {
    document.getElementById('d1').style.visibility = 'hidden';
    document.getElementById('d3').style.visibility = 'visible';
    if (el.closest('#b2')) {
    parentId = 1;
  } else if (el.closest('#b4')) {
    parentId = 2;
  }
}

function fun21() {
    document.getElementById('d2').style.visibility = 'hidden';
    document.getElementById('d1').style.visibility = 'visible';
}

function fun3() {
    document.getElementById('d3').style.visibility = 'hidden';
    if (parentId == 1) {
    document.getElementById('d1').style.visibility = 'visible';}
    else if (parentId == 2) {
    document.getElementById('d2').style.visibility = 'visible';}
}

    <div id="d1" style="visibility: active;">
<p><button id="b1" onclick="fun11()">1.1</botton></p>
<p><button id="b2" onclick="fun12()">1.2</botton></p>
</div>
<div id="d2" style="visibility: hidden;">
<p><button id="b3" onclick="fun21()">2.1</botton></p>
<p><button id="b4" onclick="fun12()">2.2</botton></p>
</div>
<div id="d3" style="visibility: hidden;">
<p><button id="b5" onclick="fun3()">3</botton></p>
</div>
    • 0

相关问题