带有多个按钮的 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')"

---

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

Answer 2

如果您更改 html 以在按钮中包含数据属性，并在 onClick 函数调用中传递“this”

<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>

然后在您的函数中，您可以检查按下了哪个按钮，并显示相应的 div。

function kfunc(thispass) {
     let fish = thispass.getAttribute('data-div');
     document.getElementById(fish).style.display = 'block';
}

至于关闭按钮。如果你给所有的 div 一个共同的类，你可以一次隐藏它们。

Answer 3

您不能像这样使用 getElementById。你应该使用 getElementByClassName 或者你可以使用下面的代码：

function kfunc(id){
        var btn = id;
        document.getElementById(id).style.display = 'block';
    }

    function closefunc(id){
        var selectedDiv = id;
        document.getElementById(id).style.display = 'none';
    }

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

div[class^= "frame"]{
    display: none;
}

<button id="btn1" onclick="kfunc('id1')">Küche</button>
    <button id="btn2" onclick="kfunc('id2')">Bad</button>
    <button id="btn3" onclick="kfunc('id3')">Wohnzimmer</button>
    <button id="btn4" onclick="kfunc('id4')">Melina</button>
    <button id="btn5" onclick="kfunc('id5')">Kleines Bad</button>
    <button id="btn6" onclick="kfunc('id6')">Schlafzimmer</button>
    
    <!-- Küche -->
    <div class="frame_kueche" id="id1">
        <div class="buttons_close">
            <button onclick="closefunc('id1')">X</button>
        </div>
        <button onclick="testfunc()">ab</button>
    </div>
    <!-- Bad -->
    <div class="frame_bad" id="id2">
        <div class="buttons_close">
            <button onclick="closefunc('id2')">X</button>
        </div>
        <button onclick="testfunc()">a</button>
    </div>
    <!-- Wohnzimmer -->
    <div class="frame_wohnzimmer" id="id3">
        <div class="buttons_close">
            <button onclick="closefunc('id3')">X</button>
        </div>
        <button onclick="testfunc()">a</button>
    </div>
    <!-- Melina -->
    <div class="frame_melina" id="id4">
        <div class="buttons_close">
            <button onclick="closefunc('id4')">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('id5')">X</button>
        </div>
        <button onclick="testfunc()">a</button>
    </div>
    <!-- Schlafzimmer -->
    <div class="frame_schlafzimmer" id="id6">
        <div class="buttons_close">
            <button onclick="closefunc('id6')">X</button>
        </div>
        <button onclick="testfunc()">a</button>
    </div>