如何在按钮显示之间切换

Question

.b1, .b2, .b3{
    padding: 1rem;
    margin: .5rem;
    }
    .b1{
    background-color: green;
    color: white;
    }
    .b2{
    background-color: red;
    color: white;
    }
    .b3{
    background-color: yellow;
    color: white;
    }

    <button class="b1">Approve</button>
    <button class="b2">Deny</button>
    <button class="b3">Void</button>

我需要一个功能，单击任何按钮都会使其他两个按钮

display:none

即使第二次单击同一按钮也无法再次显示。

只有

.b3

单击两次时才能重新出现其他按钮。

Answer 1

您可以在 Jquery 中尝试这种方式。这就是你的意思吗？只切换黄色。

$(".b1").click(function(){
  $(".b2, .b3 ").hide()

});

$(".b2").click(function(){
  $(".b1, .b3 ").hide()

});
  
  $(".b3").click(function(){
  $(".b1, .b2 ").toggle()
 
}); 

.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

Answer 2

这是按钮的单击事件处理程序。

const buttons = document.querySelectorAll("button");
buttons.forEach((el) => {
  el.addEventListener("click", function onClick(event) {
    buttons.forEach((btn) => {
      if (event.target.className !== btn.className) {
        btn.style.display =
          event.target.className === "b3" && btn.style.display === "none"
            ? "inline"
            : "none";
      }
    });
  });
});

.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}

<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

Answer 3

const buttons = document.getElementsByTagName("button");

for (button of buttons) {
    button.onclick =  clicked;
}

function clicked(event) {
  for (button of buttons) {
    button.style.display = "none";
  }
    event.target.style.display = "inline";
}

.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}

<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

将事件侦听器添加到按钮，通过

button.onclick = functionName

声明单击按钮时将触发该事件侦听器。此功能将隐藏所有按钮，然后使用

event.target

属性显示您单击的按钮。

如果需要，您也可以将其与更多按钮一起使用，只需向 HTML 添加新按钮即可。

Answer 4

您可以使用

addEventListener

javascript 函数添加按钮点击交互。

onClick

方法将调用函数

hideButtons

，该函数被传递给匿名函数以避免页面加载时的调用。

var clicked = false
var b1 = document.querySelector(".b1")
var b2 = document.querySelector(".b2")
var b3 = document.querySelector(".b3")

function hideButtons(button1, button2) {
    button1.style.display = (clicked ? "inline" : "none") 
    button2.style.display = (clicked ? "inline" : "none") 
    clicked = !clicked
}

b1.addEventListener("click", () => {hideButtons(b2, b3)})
b2.addEventListener("click", () => {hideButtons(b1, b3)})
b3.addEventListener("click", () => {hideButtons(b2, b1)})   

.b1, .b2, .b3{
  padding: 1rem;
  margin: .5rem;
}
.b1{
  background-color: green;
  color: white;
}
.b2{
  background-color: red;
  color: white;
}
.b3{
  background-color: yellow;
  color: white;
}

<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

Answer 5

我的脚本效果不佳。当使用 ouside

... 元素单击按钮“b5”时，按钮 b5 和 b4 消失，按钮 b1、b2、b3 出现。当我的关于按钮的代码不在 ... 元素内时，此功能正常工作......当我放入其中并按下或单击按钮 b5 时，它会反转。这意味着我仍然可以使用按钮 b4 和 b5。请帮忙

<form action="" method="POST" enctype="multipart/form-data"\>
{% csrf_token %}
<div class="row"\>
<div class="col-md"\>
<div class="card card-body" \>
<h5\>Informations\</h5\>
<hr\>
<p\>Nom:\</p\>
<fieldset\>
<input name="LibELE_GROUPE" type="text" id="LibELE_GROUPE" value="{{groupe.LibELE_GROUPE}}" size="35"
placeholder="Nom du groupe" tabindex="1" required\>\*
</fieldset\>

            </div>   
        </div>
    
        <div class="col-md">
            <div class="card card-body" style="width:300px; margin-left:40%;">
                <h5>Total des Utilisateurs</h5>
                <hr>
                <h1 style="text-align: center;padding: 10px"></h1>
            </div>
        </div>
    
    
        <div class="col-md">
            <div class="card card-body" style="width:200px; margin-left:50%;">
                <!--<h5>Client:</h5>-->
    
                <hr>
    
                {% if sEtat == "crea" %}
                <a class="btn btn-outline-success  btn-sm btn-block" href=""
                   style="font-size: 10px; ">Ajouter</a>
                <a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
                {% elif sEtat == "modif" %}
                <button class="b3  btn-outline-warning  btn-sm btn-block " href=""
                        style="font-size: 10px;display:None;">
                    Modifier
                </button>
                <button class="b2  btn-outline-danger  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Supprimer
                </button>
                <button class="b1  btn-outline-secondary  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Annuler
                </button>
                <button class="b4 btn-outline-success  btn-sm btn-block" id="AJ" name="Ajouter" type="submit"
                        value="Submit"
                        style="font-size: 10px; ">Ajouter
                </button>
                <button class="b5 btn-outline-info  btn-sm btn-block" id="QT" href="" style="font-size: 10px; ">Quitter
                </button>
    
                {% else %}
                <a class="btn btn-outline-success  btn-sm btn-block" href=""
                   style="font-size: 10px; ">Ajouter...</a>
                <a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
                {% endif %}
    
            </div>
    
        </div>
    
    </div>
    <script>
                                const buttons = document.getElementsByTagName("button");
    
                                var clicked = false
                                var b1 = document.querySelector(".b1")
                                var b2 = document.querySelector(".b2")
                                var b3 = document.querySelector(".b3")
                                var b5 = document.querySelector(".b5")
    
                                function hideButtons( button1, button2, button3) {
                                    clicked = false
                                    for (button of buttons) {
                                        button.style.display = "inline";
                                    }
                                    button1.style.display = (clicked ? "inline" : "none")
                                    button2.style.display = (clicked ? "inline" : "none")
                                    button3.style.display = (clicked ? "inline" : "none")
                                    clicked = !clicked
                                }
                                b1.addEventListener("click", () => {hideButtons(b2, b3, b1)})
    
                                function hideButtons1( button1, button2, button3) {
                                    clicked = false
                                    for (button of buttons) {
                                        button.style.display = "none";
                                    }
                                    button1.style.display = "inline";
                                    button2.style.display = "inline";
                                    button3.style.display = "inline";
                                    clicked = !clicked
                        }
    
    
                                b5.addEventListener("click", () => {hideButtons1(b1, b2, b3)})
    
    </script>

</form\>