изменить класс в JavaScript с помощью d3 выберите и отфильтруйте

Question

У меня есть функция, как показано ниже.

Во-первых, я изменяю весь класс на "знак-знак". Затем проверьте текст в диапазоне. Если он «правильный» и нажал, то измените на «значок-знак-основной». Иначе, это «неправильно» и щелкнуло, изменив на «класс», «значок, значок-опасность».

Могу ли я сделать мой код более кратким и правильным?

function updateOrderType(ansType) {
    lastAnsType = ansType;
    var ansBadge = d3.select("#anstype").selectAll("span.badge");
    ansBadge.attr("class", "badge badge-secondary");
    ansBadge.filter(function() {
        if (d3.select(this).text() == ansType) {
            return d3.select(this).text() == "right";
        }
    }).attr("class", "badge badge-primary");
    ansBadge.filter(function() { 
        if (d3.select(this).text() == ansType) {
            return d3.select(this).text() == "wrong";
        }
    }).attr("class", "badge badge-danger");
}

Answer 1

Упрощение ответа georgina95

function updateOrderType(ansType) {
    var ansBadge = d3.select("#anstype").selectAll("span.badge");

    ansBadge.forEach(function() {
        var oElement = d3.select(this);
        var newClass = "badge badge-secondary";

        if (/**CLICKED**/) {
            var sText = oElement.text();

            if(sText === "right") {
                newClass = "badge badge-primary";
            } else if(sText === "wrong") {
                newClass = "badge badge-danger";
            }
        }
        oElement.setAttribute("class", newClass);
    }
}

Answer 2

Спасибо за вашу помощь. во-первых, я не могу использовать forEach с d3.select (v4). Это объект, который не использует attr, но setAttribute. Поэтому я должен изменить свой код:

function updateOrderType(ansType) {
    d3.select("#ordertype").selectAll("span").each(function() {
        var badgeText = this.textContent;
        if(ansType === badgeText) {
                if(ansType === "right") {
                    this.setAttribute("class", "badge badge-primary");
                } else if (ansType === "wrong") {
                    this.setAttribute("class", "badge badge-danger");
                } else {
                    this.setAttribute("class", "badge badge-secondary");
                }
        } else {
                this.setAttribute("class", "badge badge-secondary");
        } 
    });
}

Answer 3

Я думаю, что ваш код немного сложен для понимания, но в соответствии с логикой, которую вы написали во вступлении, я предлагаю использовать следующее:

function updateOrderType(ansType) {
    var ansBadge = d3.select("#anstype").selectAll("span.badge");

    ansBadge.forEach(function() {
        var oElement = d3.select(this);

        if (/**CLICKED**/) {
            var sText = oElement.text();

            if(sText === "right") {
                oElement.setAttribute("class", "badge badge-primary");
            } else if(sText === "wrong") {
                oElement.setAttribute("class", "badge badge-danger");
            } else {
                oElement.setAttribute("class", "badge badge-secondary");
            }

        } else {
            oElement.setAttribute("class", "badge badge-secondary");
        }
    }
}

Ваш код перебирал массив ansBadge почти 5 раз, оценивая 1 if оператор в каждом раунде. Мое предложение выше повторяется 1 раз и имеет 3 , если s на вершинах. Вы можете даже улучшить это, если проверяете, щелкнул ли элемент , а не (во внешнем , если ), поскольку это более вероятно.

В этом коде обрабатываются четыре типа элементов:

• нажал и "вправо"> основной
• нажал и "неправильно"> опасность
• щелкнул по любому тексту> вторичный
• без щелчка по тексту> вторичный