JavaScript - Как я могу сделать его более динамичным c? - PullRequest
Новая
       17

JavaScript - Как я могу сделать его более динамичным c?

0 голосов
/ 20 марта 2020

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-х кнопочных ответов, как я могу сделать его более динамичным c? 

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

Я не знаю, почему это не работает ,

Он печатал один и тот же идентификатор кнопки каждый раз, когда я нажимал другую кнопку или ту же кнопку ... 

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-l oop, и в результате я получаю ошибку от 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);
});

Я думаю, что это решение для меня. :)

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Дайте всем кнопкам одинаковые class="answer_btn". Тогда вы можете сделать 

$(".answer_btn").click(function() {
  select_answer(this);
  $(".answer_btn").not(this).each(function() {
    deselect_answer(this);
  });
});
0 голосов
/ 21 марта 2020 
        button.addEventListener("click", function() {
        selectAnswer(this);
        $(".exam-btn").not(this).each(function() {
          deselectAnswer(this);
        });
        console.log(this.id);
    });

Мое решение, вдохновленное Barmar. :)

...