时间戳

首页 > 解决方案 > 如何使用 jquery 单选按钮？

javascript - 如何使用 jquery 单选按钮？

问题描述

单击按钮时，如何操作 CSS 并读取文本值并将其保存到变量中。当我使用 jquery 单击按钮时，如何向按钮添加 CSS，例如class="btn-n-active".

如何确保在打开不同按钮时只选择一个按钮并且该按钮应具有activeCSS

我试图从选项中读取单个值，只是一个选择。

<p> 
  <button onclick="myFunction()" class="btn-n">DOG</button>
  <button onclick="myFunction()" class="btn-n">CAT</button>
  <button onclick="myFunction()" class="btn-n">LION</button>
  <button onclick="myFunction()" class="btn-n">PIG</button>
</p>

const myFunction = () => {

}

这就像一个测验系统，我只想读取一个值。我无法应用逻辑

标签： javascripthtmljquerycss

解决方案

您可以使用 hasClass('btn-n-active') 找到具有活动类的选定答案按钮


$("button").click(function(){
    $("button").removeClass("btn-n-active"); // Remove other active class
    $(this).addClass("btn-n-active"); // Add active class to the clicked button
});


const myFunction = () => {
    var selectedButtonText = $("button").hasClass("btn-n-active").html();
    console.log("Selected answer: " + selectedButtonText);
}

推荐阅读