JavaScript - 如何使其更加动态?

标签 javascript html button dynamic

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 个按钮答案,所以如何才能使其更加动态?

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() 只改变当前取消/选择按钮的颜色

我不知道为什么这不起作用。

每次我点击另一个按钮或同一个按钮时,他都会打印出相同的按钮 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 收到错误,并且如果我单击了两者,按钮将保持单击的颜色。

Mistake 这是新问题。我希望你可以帮助我?

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);
  });
});

关于JavaScript - 如何使其更加动态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60780891/

相关文章:

javascript - JOI 验证字符串在 , 和

javascript - 通过单击区域隐藏菜单

javascript - 通过 Google Scripts 从 Google Sheet 向 Telegram 发送消息

html - CSS translate X 导致屏幕移动右侧出现空白

qt - 如何在qt中创建正确的退出按钮

iphone SDK : sound problems

javascript - td 上的 JQuery html 函数

javascript - Node.js 检查用户是否已经存在

javascript - 如何使用 JavaScript 保留分数格式?

android - 如何禁用Android应用程序中的按钮