HTML按鈕切換

我有四個按鈕，每個按鈕決定酒店房間的風扇應該有多大的速度。因此，如果用戶單擊一個按鈕，其他按鈕應處于關閉模式。關于如何實作它的任何想法？

現在我有四個按鈕，用戶可以同時打開，這對我的應用程式沒有意義。

$("#wentAOnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1175", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });

    $("#went1OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1176", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });
    $("#went2OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1177", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });
    $("#went3OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1178", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });

uj5u.com熱心網友回復：

使用類和資料屬性

const $went = $(".went")// all 4 buttons by class
  .on("click", function() { // any of them
  const id1 = this.dataset.id1;
  const id2 = this.dataset.id2;
  $went.removeClass("active");
  $(this).addClass("active");
/*
  $.ajax({
    url:'do',
    type:'POST',
    data: {
      actions:[
        {action: "set", what: "mbt", id: id1, val: 1},
        {action: "set", what: "mbt", id: id2, val: 1},
      ]
    },
    success: function(res) { },
    error : function() { }
  });
*/  
});

.active { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="went" data-id1="1175" data-id2="1062">Off</button>
<button class="went" data-id1="1176" data-id2="1062">Off</button>
<button class="went" data-id1="1177" data-id2="1062">Off</button>
<button class="went" data-id1="1178" data-id2="1062">Off</button>

uj5u.com熱心網友回復：

我不清楚是什么問題，關閉其他 3 個按鈕或 ajax 呼叫？什么沒有意義？

無論如何，您可以迭代每個按鈕上的所有按鈕click并關閉那些不是用戶單擊的按鈕的按鈕。您可以使用 jQuery 獲取所有按鈕并對其進行迭代。因為您擁有被點擊元素的 ID，所以您可以關閉所有其他按鈕。

uj5u.com熱心網友回復：

我從https://stackoverflow.com/a/72828887/125981借用了其中的大部分內容，但增加了一鍵關閉所有風扇的功能；并通過使用資料屬性而不是切換類來切換 CSS 中的文本。

const $went = $(".went"); // all 4 buttons by class
$went.on("click turnoff", function(event) { // any of them
  const id1 = this.dataset.id1;
  const id2 = this.dataset.id2;
  this.dataset.fan = this.dataset.fan === "off" ? "on" : "off";;
  if (event.type === "turnoff") {
    this.dataset.fan = "off";
  }

  let mydata = {
    actions: [{
        action: "set",
        what: "mbt",
        id: id1,
        val: 1
      },
      {
        action: "set",
        what: "mbt",
        id: id2,
        val: 1
      },
    ]
  };

  /*
    $.ajax({
      url:'do',
      type:'POST',
      data:mydata
      })
      .done(result){})
      .fail(xrf){});
  */
});
$('.all-off').on('click', function() {
  $went.trigger('turnoff');
});

.went[data-fan="on"] {
  background-color: #ddffdd;
}

.went[data-fan="on"]:after {
  content: 'On';
}

.went[data-fan="off"] {
  background-color: #ffdddd;
}

.went[data-fan="off"]:after {
  content: 'Off';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="went" data-id1="1175" data-id2="1062" data-fan="off"></button>
<button class="went" data-id1="1176" data-id2="1062" data-fan="off"></button>
<button class="went" data-id1="1177" data-id2="1062" data-fan="off"></button>
<button class="went" data-id1="1178" data-id2="1062" data-fan="off"></button>
<button class="all-off">All Off</button>

標籤：javascript html jQuery 总线

上一篇：如何根據它們的innerHTML獲取元素

下一篇：單擊以在elementor中播放另一個按鈕時如何停止按鈕播放