JS + JS =破解代碼？

Question

當我在同一文檔中添加2個不同的javascript代碼時，其中一個停止正常工作； 單擊下一個問題后，便會遵循我的視口。 目前還沒有，我也不知道為什么。 我檢查了變量名稱等，並且沒有重復項。

這是過去發生的事情，我失去了一些功能，我真的很想對此進行解釋。

http://codepen.io/erayner/pen/mRrMVd （這是我的最終代碼） http://codepen.io/erayner/pen/VPvLyR （這是應該做的）

第一個代碼

//when you click on an answer, the next answer appears

$(() => {
    init();
});

function init() {
    numberSections();
    bindAnswerClick();
    showSection(0);
}

function numberSections() {
    $(".section").each((index, elem) => {
        $(elem).data("index", index);
        $(elem).attr("data-index", index);
    });
}

function bindAnswerClick() {
    $(".answer").on("click", (e) => {
        selectAnswer($(e.currentTarget));
    });
}

function selectAnswer($answer) {
    let $section = $answer.closest(".section");
    let nextIndex = parseInt($section.data("index")) + 1;

    $section.find(".answer").removeClass("highlight");
    $answer.addClass("highlight");

    showSection(nextIndex);
}

function showSection(index) {
    $(".section[data-index='" + index + "']").show();
}

第二碼

//variables for end answer

var finalAnswers = [];
var button = document.getElementById("button");
//add answer values together and find end URL for button

$(document).ready(function () {

    $("a[data-value]").on("click", function (e) {
        var value = $(this).attr('data-value');
        finalAnswers.push(value);
        e.preventDefault();
    });

    $(".Finalbutton").click(function () {
        var store = finalAnswers;
        var frequency = {}; // array of frequency.
        var max = 0; // holds the max frequency.
        var result; // holds the max frequency element.
        for (var v in store) {
            frequency[store[v]] = (frequency[store[v]] || 0) + 1; // increment  frequency.
            if (frequency[store[v]] > max) { // is this frequency > max so far ?
            max = frequency[store[v]]; // update max.
            result = store[v]; // update result.
            }
        }

    if (result == "A")
        button.setAttribute("href", "http://www.w3schools.com");
    if (result == "B")
        button.setAttribute("href", "http://dailydropcap.com/images/C-9.jpg");
    if (result == "C")
        button.setAttribute("href", "http://www.w3schools.com");
    });

});

Answer 1

原因如下：

單擊“ .answer”時，將執行此代碼

$(".answer").on("click", (e) => {
    selectAnswer($(e.currentTarget));
});

但是，當單擊“ a[data-value] ”時，也將單擊“ .answer ”。 因為

$(".answer").on("click", (e) => {
    selectAnswer($(e.currentTarget));
});

早於

$("a[data-value]").on("click", function (e) {
    var value = $(this).attr('data-value');
    finalAnswers.push(value);
    e.preventDefault();
});

因此執行第一個代碼，但不執行第二個代碼。

你不應該使用.on('click',...語法。好多是addEventListener 。

單擊后應執行操作時，請在可能的.addEventListener區域上添加一個.addEventListener 。 語法類似於以下內容：

area.addEventListener('click',function(e) {
    if( e.taget ... ){ action 1 } else if( e.target ... ) { action 2 }and so on.
}