javascript - 如何从单选按钮设置元素的属性而不提交

Question

我有很多按钮。如果我点击其中之一，则调用此函数:

function addOptions(id)
{
  var button = document.getElementById(id); //clicked button
  radioDiv = document.querySelector("div.radioDiv");
  radioDiv.style.visibility = "visible";
  var raz = document.getElementsByName('status'); //get radioButtons
  $(".radioDiv").ready(function() {
    $('input[type=radio][name=status]').change(function(){

         /*Here I'm trying to set attribute to only one button but 
           here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd) 
           and on 3rd button I choice the "radioButton" this code is set Attribute for 
           all of them (3) */

                button.setAttribute("status", this.value);  
            });
          });
        }

这里是index.html。 RadioDiv 默认隐藏

   <div class="layer1">
    <div class="radioDiv">
      <input type="radio" value="sale" name="status">111
      <input type="radio" value="inverted" name="status">222
    </div>
  </div>
  <div class="layer2"></div>

因此，我需要根据 RadioButton 的值设置按钮的属性。

Answer 1

在 js 文件的开头使用全局变量。

var lastButton;
function addOptions(id) {
  $(".radioDiv input[type=radio][name=status]").prop("checked", false);
  lastButton = document.getElementById(id); //last clicked button
  var status = lastButton.getAttribute("status");
  $(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true);
  $(".radioDiv").prop("visible", true);
  $('input[type=radio][name=status]').click(function(){
    lastButton.setAttribute("status", this.value);
  });
}