jQuery меняет цвет фона div в зависимости от его текущего цвета

Question

Я новичок в jQuery и изучаю и играю с ним как можно больше. Моя проблема не хватает времени, мне нужно, чтобы этот проект был завершен как можно скорее. В любом случае мой вопрос ...

У меня есть ссылка, при нажатии на которую она вызывает функцию jquery ajax, которая работает нормально ... в случае успеха я хочу, чтобы код изменил цвет фона div, но это зависит от его текущего цвета, потому что он может быть переключен обратно и вперед между двумя цветами ...

В любом случае, вот с чем я играл ...

highlightColor = "#d8fe00"; //Updated to not cause confusion...
whiteColor = "#ffffff"; //Updated to not cause confusion...

$("input[value*='" + cId + "']").closest("div[class*='link-black']").attr("background-color", function(iPos, color) {
if(color != highlightColor) { return highlightColor; }
else { return whiteColor; }
}

Любая помощь будет оценена заранее спасибо !!

Answer 1

Как насчет не стилей с использованием javascript и использования хорошего старого CSS?

CSS

.white { background-color: white; }
.white.highlight { background-color: yellow; }
.red { background-color: red; }
.red.highlight { background-color: pink; }

JS

 $("input[value*='" + cId + "']").closest("div[class*='link-black']").toggleClass('highlight');

Answer 2

Попробуйте использовать .toggleClass вместо:

CSS:

.highlight { background-color: 'yellow'; }

JS:

$("#selector").toggleClass("highlight");

Answer 3

.classOne { color: red; }
.classTwo { color: blue; }
.classThree { color: green; }

.classOne.highlighted { background-color: white; }
.classTwo.highlighted { background-color: black; }
.classThree.highlighted { background-color: purple; }

В обратном вызове AJAX все, что вам нужно сделать, это добавить «выделенный» класс к вашему элементу.Вы можете позволить CSS определить, какой цвет текста и какой цвет должен быть у фона.Классы, очевидно, должны быть более наглядными, чем classOne.