javascript - 带有多个按钮的 document.getElementById

Question

我有六个按钮，我想将所有功能合而为一。每个按钮都有一个不同的可用 div，如果我单击第三个按钮，则应该弹出第三个按钮的 div。

JavaScript:

function kfunc(){
    var x = document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6")
    x.style.display = 'block';
    x;
}

function closefunc(){
    document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6").style.display = 'none';
}

function testfunc(){
    alert("test");
}

HTML:

    <button id="btn1" onclick="kfunc()">Küche</button>
    <button id="btn2" onclick="kfunc()">Bad</button>
    <button id="btn3" onclick="kfunc()">Wohnzimmer</button>
    <button id="btn4" onclick="kfunc()">Melina</button>
    <button id="btn5" onclick="kfunc()">Kleines Bad</button>
    <button id="btn6" onclick="kfunc()">Schlafzimmer</button>

<!-- Küche -->
<div class="frame_kueche" id="id1">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
    <div class="buttons_close">
        <button onclick="closefunc()">X</button>
    </div>
    <button onclick="testfunc()">a</button>
</div>

差不多就可以了!从逻辑上讲，当有 id1 可用时，它将使用 id1 而不是其他。我该如何解决？就像我说的:当 btn3 被点击时，带有 id3 的 div 应该出现，但它总是显示 id1。

Answer 1

看看你的javascript。实际上你不需要为你的按钮设置 id 属性。

只需将您的frame id 作为参数添加到kfunc 和closefunc 函数。像这样:

function kfunc(id) { 
    console.log(id)
    document.getElementById(id).style.display = 'block'
}

function closefunc(id) {
    console.log(id)
    document.getElementById(id).style.display = 'none'
}

用法:

onclick="kfunc('id1')"
onclick="closefunc('id1')"

---

注意:我的解决方案未测试。希望你明白了。