javascript - JavaScript-如何使其更具动态性？

的JavaScript

$("#answer_a_btn").click(function() {
  selectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});

$("#answer_b_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  selectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});
$("#answer_c_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  selectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});
$("#answer_d_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  selectAnswer("#answer_d_btn");
}); 

因为我有4个以上的Button Answers，那么如何使它更具动态性呢？

function selectOnlyOneExamButton(examButtonId, examButtonsIds) {
   for(var i = 0; i < examButtonsIds.length; i++)
    {
        if(examButtonsIds[i] == examButtonId)
        {
            console.log("SELECTED ANSWER " + examButtonsIds[i]);
            selectAnswer(examButtonsIds[i]);
        }
        else {
            console.log("DESELECTED ANSWER " + examButtonsIds[i]);
            deselectAnswer(examButtonsIds[i]);
        }
    }
};

de- / selectAnswer（）仅更改当前de- / selected按钮的颜色

我不知道为什么这行不通。

每当我单击另一个按钮或相同按钮时，他都会打印出相同的按钮ID。

var examButtonsIds = [];
   var examButtonId = "";

   for(var i = 0; i < zwischenpruefungen[1].exams.length; i++)
    {
        currentExam = zwischenpruefungen[1].exams[i];
        console.log(i);
        if(i % 2 == 0)
        {
            examscreen.appendChild(row);
        }
        var p = document.createElement("p");
        p.className = "col-md-6";
        var button = document.createElement("button");
        button.id =  "exam-" + currentExam.season + "-" + currentExam.year + "-btn";
        button.className = "exam exam-btn btn btn-secondary btn-lg btn-block";
        examButtonId = button.getAttribute("id");

        button.addEventListener("click", function() {
            console.log("SELECT ONE EXAM BUTTON CLICKED");
            selectAnswer(this);
            $.each(".exam-btn").not(this).each(function() {
                deselectAnswer(this);
            });
        });
        var span = document.createElement("span");
        span.className = Object.keys(currentExam)[1];
        span.textContent = currentExam["season-de"] + " ";
        var span2 = document.createElement("span");
        span2.className = Object.keys(currentExam)[3];
        span2.textContent = currentExam.year;
        row.appendChild(p);
        p.appendChild(button);
        button.appendChild(span);
        button.appendChild(span2);
        examButtonsIds[i] = button.getAttribute("id");
    }

我在for循环中执行以下操作，结果是，我从jquery.min.js收到一个错误，并且如果单击这两个按钮，按钮将保持单击状态。


这是新问题。我希望你能帮帮我？

button.addEventListener("click", function() {
    selectAnswer(this);
    $(".answer-" + letter.toLowerCase() + "-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    console.log(this.id);
});

button.addEventListener("click", function() {
    selectAnswer(this);
    $(".answer-a-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    $(".answer-b-btn").not(this).each(function() {
        deselectAnswer(this);
    });
    $(".answer-c-btn").not(this).each(function() {
        deselectAnswer(this);
    });
      $(".answer-d-btn").not(this).each(function() {
        deselectAnswer(this);
    });
    $(".answer-e-btn").not(this).each(function() {
        deselectAnswer(this);
      });
    console.log(this.id);
});

我以为可以，但是没有，有人可以告诉我为什么吗？
我有一个可以正常工作的复杂功能，但我希望它更简单。

button.addEventListener("click", function() {
    selectAnswer(this);
    var letterTmp = this.id.split('-')[3];
    $(".answer-" + letterTmp + "-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    console.log(this.id);
});

我认为这是我的解决方案。 :)

最佳答案

给所有按钮相同的class="answer_btn"。那你可以做

$(".answer_btn").click(function() {
  select_answer(this);
  $(".answer_btn").not(this).each(function() {
    deselect_answer(this);
  });
});