如何 JavaScript 一个按钮来提醒当前还有哪些其他按钮处于活动状态？

Question

我在 JavaScript 方面经验不足，所以请原谅我糟糕的描述！（此外，它必须是 JavaScript 而不是 jQuery，因为它要在封闭系统（无法访问 Internet）上工作。

所以我希望用户点击的最后一个 PLAY 按钮通过报告它们的 ID 来提醒其他按钮当前处于活动状态。

所有按钮都相同 class <btnpluse> 但它们都有唯一的 ID。这些按钮有 4 组，一次只能激活一组中的一个按钮。有四个函数可以实现这一点。

一旦用户从每组中选择了一个按钮，我希望 PLAY 按钮发出警报（并在代码中打印），说明已选择哪个活动按钮，以便最终可以让我知道用户想要什么'play'

我已经想出了如何在您按下按钮时获取按钮的 ID，但似乎找不到报告另一个按钮 ID 的按钮的代码，如果它具有具有 [=34 的功能的话=]附在上面！

到目前为止，这是我的代码。

function char(obj){

    if (document.querySelector(".activeC")) 
 {
        document.querySelector(".activeC").className = document.querySelector(".activeC").className.replace(" activeC",""); 
    }
    obj.className = obj.className + " activeC";
}
function rate(obj){

    if (document.querySelector(".activeR")) 
 {
        document.querySelector(".activeR").className = document.querySelector(".activeR").className.replace(" activeR",""); 
    }
    obj.className = obj.className + " activeR";
}
function sym(obj){

    if (document.querySelector(".activeS")) 
 {
        document.querySelector(".activeS").className = document.querySelector(".activeS").className.replace(" activeS",""); 
    }
    obj.className = obj.className + " activeS";

}
function rhy(obj){
  
    if (document.querySelector(".activeRH")) 
 {
        document.querySelector(".activeRH").className = document.querySelector(".activeRH").className.replace(" activeRH",""); 
    }
    obj.className = obj.className + " activeRH";
}

function playstop(obj, id) {

document.getElementById("playstop");

  var btnOn = document.getElementById('playstop');
 btnOn.classList.toggle('orange');
 if (btnOn.innerHTML === "PLAY") {
    btnOn.innerHTML = "STOP";
  } else {
    btnOn.innerHTML = "PLAY";
  }
 var showAlert = document.getElementById('playstop');
 if(document.getElementsByClassName + "activeRH")
  showAlert = (id);
 alert(this.id);
}

h1 {
 font-size: 18px;
 color: #ec6607;
 height: 5px;
}
h2 {
 font-size: 18px;
 color: #ec6607;
 height: 5px; 
}
h3{
 font-size:14px;
 color: #fca600;
 padding-left: 10px;
 height: 5px;
 }
.Pulse-Char{
 width: 100%;
 height: 505px;
 display: block;
 background-color:#f2f2f2;
}
.Pulse-CharBG{
    height: 26%;
 width:96%;
    display: inline-block;
    background-color: #fcfcfc;
    margin-top: 2%;
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 1%;
 outline: auto;
 outline-color: #c4c4c4;
 box-shadow: 3px 3px 6px 1px #c4c4c4;
}
.Pulse-CharBG2{
    height: 21.3%;
 width:96%;
    display: inline-block;
    background-color: #fcfcfc;
    margin-top: 1%;
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 1%;
 outline: auto;
 outline-color: #c4c4c4;
 box-shadow: 3px 3px 6px 1px #c4c4c4;
}
.Pulse-CharBG3{
    height: 20.3%;
 width:96%;
    display: inline-block;
    background-color: #fcfcfc;
    margin-top: 1%;
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 1%;
 outline: auto;
 outline-color: #c4c4c4;
 box-shadow: 3px 3px 6px 1px #c4c4c4;
}
.Pulse-CharBG4{
    height: 10.3%;
    width: 96%;
    display: block;
    background-color: #fcfcfc;
    margin-top: 1%;
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 1%;
    outline: auto;
    outline-color: #c4c4c4;
    box-shadow: 3px 3px 6px 1px #c4c4c4;
}
.col{
    width: 31.3%;
 display: block;
    float: left;
 padding-left: 2%;
 padding-top: 1%;
 }
.colrate{
    width: 22%;
 display: inline-block;
    float: left;
 padding-left: 3%;
 }
.pulse-panel .Pulse-Char .PlayBtnArea {
    width: 100%;
    float: left;
    padding-left: 2%;
    margin-top: 1%;
    display: inline-block;
 }
.colplay{
    width: 96%;
 display: inline-block;
    float: left;
 padding-left: 3%;
 }
btnpulse{
    width: 80%;
    height: 20px;
    font-size: 14px;
    background-color: #F8F8F8;
    color: #ec6607;
    margin: 1%;
    text-align: center;
    padding: 3%;
    float: left;
    border-radius: 30px;
    border: medium solid #EC6607;
 cursor: pointer;
}
btnplaystop{
    width: 80%;
    height: 20px;
    font-size: 14px;
    background-color: #F8F8F8;
    color: #ec6607;
    margin: 1%;
    text-align: center;
    padding: 3%;
    float: left;
    border-radius: 30px;
    border: medium solid #EC6607;
 cursor: pointer;
 }
btnpulse.activeC { 
 background-color: #ec6607 !important; 
 color:antiquewhite;
}
btnpulse.activeRH { 
 background-color: #ec6607 !important; 
 color:antiquewhite;
}
btnpulse.activeR { 
 background-color: #ec6607 !important; 
 color:antiquewhite;
}
btnpulse.activeS { 
 background-color: #ec6607 !important; 
 color:antiquewhite;
}
btnplaystop.orange{
 background-color: #ec6607 !important; 
 color:antiquewhite;
}

<div class="Pulse-Char">
    <div class="Pulse-CharBG">
        <h3>Pulse Character</h3>
        <div class="col"><btnpulse id = "btnPulNor" onClick = "char(this)">Normal</btnpulse></div>
        <div class="col"><btnpulse id = "btnPulWeak" onClick = "char(this)">Weak</btnpulse></div>
        <div class="col"><btnpulse id = "btnPulSlow" onClick = "char(this)">Slow rising</btnpulse></div>
        <div class="col"><btnpulse id = "btnPulBou" onClick = "char(this)">Bounding</btnpulse></div>
        <div class="col"><btnpulse id = "btnPulBis" onClick = "char(this)">Bisferens</btnpulse></div>
        <div class="col"><btnpulse id = "btnPulAlt" onClick = "char(this)">Alternans</btnpulse></div>
    </div>
    <div class="Pulse-CharBG2">
        <h3>Rhythm</h3>
        <div class="col"><btnpulse id = "btnRhyReg" onClick = "rhy(this)">Regular</btnpulse></div>
        <div class="col"><btnpulse id = "btnRhyRegIrr" onClick = "rhy(this)">Regularly Irregular</btnpulse></div>
        <div class="col"><btnpulse id = "btnRhyIrrIrr" onClick = "rhy(this)">Irregularly Irregular</btnpulse></div>
    </div>
    <div class="Pulse-CharBG3">
        <h3>Rate</h3>
        <div class="colrate"><btnpulse id = "btnRate40" onClick = "rate(this)">40</btnpulse></div>
        <div class="colrate"><btnpulse id = "btnRate70" onClick = "rate(this)">70</btnpulse></div>
        <div class="colrate"><btnpulse id = "btnRate120" onClick = "rate(this)">120</btnpulse></div>
        <div class="colrate"><btnpulse id = "btnRate180" onClick = "rate(this)">180</btnpulse></div>
    </div>
    <div class="Pulse-CharBG2">
        <h3>Symmetry</h3>
        <div class="col"><btnpulse id = "btnSymNor" onClick = "sym(this)">Normal</btnpulse></div>
        <div class="col"><btnpulse id = "btnSymRR" onClick = "sym(this)">Radio-radial delay</btnpulse></div>
        <div class="col"><btnpulse id = "btnSymRF" onClick = "sym(this)">Radio-femoral delay</btnpulse></div>
    </div>
    <div class="PlayBtnArea">
        <div class="colplay"><btnplaystop id = "playstop" onClick = "playstop()">PLAY</btnplaystop></div>
    </div>         
</div>

Answer 1

您可以只查询具有 activeXX class（不同 XX）的元素，并获取它们的 id 属性。

let ids = Array.from(document.querySelectorAll(".activeC, .activeRH, .activeR, .activeS"), btn => btn.id);

ids 是一个数组。如果您 alert(ids)，您将看到 id 属性值的逗号分隔列表。

注意：你代码中的以下几行对我来说没有意义：

if(document.getElementsByClassName + "activeRH")
    showAlert = (id);

document.getElementsByClassName 是一个函数，然后您对该函数对象执行字符串加法，连接 "activeRH"。这给出了一个字符串值，然后您将其转换为布尔值，因为它是一个 if 表达式。这将始终是 true，因为该字符串不为空。我不知道你想在那里做什么。

id 周围的括号也没有做任何事情。此外，obj 和 id 是未定义的，因为 playstop 是在没有参数的情况下调用的。

如何 JavaScript 一个按钮来提醒当前还有哪些其他按钮处于活动状态？

How to JavaScript a button to alert what other buttons are currently active?

html

javascript

button

show