使用单个切换按钮访问多个链接

Posted 2023-03-07

【中文标题】使用单个切换按钮访问多个链接

【英文标题】：Accessing multiple Links using a single toggle button

【发布时间】：2020-12-15 02:42:58

【问题描述】：

我的 html 页面中有 2 个按钮（开灯和关灯）用于发送 http 请求以打开和关闭灯。但是现在，我不知道如何使用单个切换按钮发送两个 http 请求。例如：当切换按钮打开时，它会发送一个 http web 请求，当它关闭时，它会发送另一个 web 请求。

目标：当切换按钮打开时，它会向智能灯泡发送请求并将其打开。当切换按钮关闭时，它会发送关闭灯泡的请求。

所需的切换按钮是

https://codepen.io/juan-carlo-isidro-onciangco/pen/WNrBJWZ

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="btn-base">
  <input type="checkbox" class="btn-inner">
</div>

查看上面链接中的完整代码

【问题讨论】：

在这种情况下，我认为没有理由不能制作可运行的 sn-p。

【参考方案1】：

首先检查该类是否存在，然后根据该类执行您的请求

btn.addEventListener('click', function() 

    if(btn.classList.contains('turn-on')) 
       btn.classList.remove('turn-on');
       // http request here for turn off
     else 
       btn.classList.add('turn-on');
       // http request here for turn on
    
    
    btn.classList.toggle('btn-inner-on');
    bodyWindow.classList.toggle('body-on');
    btnBase.classList.toggle('btn-base-on');
);

【讨论】：

但是你在哪里添加你的两个 http 请求？

@jo8080 就在我放 cmets 的地方

@jo8080 //http request here 删除评论并将您的请求放在那里。

通常不向类添加事件处理程序。如果该类更改其名称，则该事件将被破坏。

【参考方案2】：

输入检查中的事件。如果输入检查打开，否则关闭。按照代码：

const btn = document.querySelector('.btn-inner');
const btnBase = document.querySelector('.btn-base');
const bodyWindow = document.querySelector('body');

btn.addEventListener('click', () => 
    
    btn.classList.toggle('turn-on');
    btn.classList.toggle('btn-inner-on');
    bodyWindow.classList.toggle('body-on');
    btnBase.classList.toggle('btn-base-on');
  
    if(btn.checked)  
       //http request here for turn on
       console.log('turn on');
     else 
       //http request here for turn off
       console.log('turn off');
  
);