Изменение различных свойств различных элементов с помощью одного контроллера в jQuery: правильный путь?

Question

Похоже, я застрял с селекторами jQuery.

Я хотел бы иметь один контроллер для изменения, например, значения цвета css элемента colorsample и html в элементе value.Страница выглядит следующим образом:

<span class="controller blue">██</span>
<span class="controller red">██</span>

<span class="colorsample red">██</span>
<span class="colorsample blue">██</span>

<span class="hexcolor red">#FF0000</span>
<span class="hexcolor blue">#0000FF</span>

Код jQuery ... Ну, у меня его нет для этого примера, потому что я застрял.Предыдущая версия этой страницы была сгенерирована с помощью движка шаблонов, поэтому у каждого элемента было уникальное имя, и для каждого контроллера у меня был собственный фрагмент JavaScript, который работал просто отлично, но я подумал, что это глупо, и наличие таких двойных классов казалосьбыть хорошей идеей для меня, но теперь я не могу обернуть голову, выбирая их, я пытаюсь что-то вроде:

$("span.control").click(function(){
get an element which has the same class as this one, but not entirely, goddamit!
});

Так что я думаю, что я делаю что-то очень неправильно здесь, что хорошоподход к созданию такой страницы?Мне не нужен подробный код, просто общее направление было бы замечательно.

Редактировать: Я хотел бы сохранить эти уродливые символы, потому что страница о псевдографических интерфейсах.

Answer 1

Используйте это , чтобы получить список классов и найти элементы управления, которые содержат один класс, который вы ищете.

После этого вы можете получить цвет, используя селектор, подобный $(".hexcolor ." + colorName).val();, и поместить его в свои элементы ' css .

Answer 2

ОК, просто в этой ситуации я сделал следующее:

Атрибут класса определяет функцию элемента: контроллер предназначен для вызова виджета colorpicker, sample (я выделил несколько разных из них, чтобы показать, как цвет работает в разных контекстах) предназначен для демонстрации того, как он выглядит, а hexcolor - для отображения RGB-кода цвета, который люди могут использовать в своих конфигах.

Атрибут Name точно определяет, какой цвет необходимо изменить с помощью контроллера, например,

<span class="controller" name="red">██</span>
<span class="controller" name="blue">██</span>

<span class="colorsample" name="red">██</span>
<span class="colorsample" name="blue">██</span>

<span class="hexcolor" name="red">#FF0000</span>
<span class="hexcolor" name="blue">#0000FF</span>

Поэтому я выполняю обработку строк в JavaScript, но это не разбиение массива, а тривиальная конкатенация, например так:

//getting name
var myName = $(this).attr("name"); 
//making a selector for sample
var sampleSelector = "\'span[class=\"sample\"][name=\"" + myName + "\"]\'";
//making a selector for hexcode
var hexColorSelector = "\'span[class=\"hexcolor\"][name=\"" + myName + "\"]\'";

Позже они могут быть использованы в селекторах нескольких атрибутов, здесьопция для виджета выбора цвета:

onChange: function (hsb, hex, rgb) { //that's from widget docs
     $(sampleSelector).css('color', '#' + hex);
     $(hexColorSelector).html('#' + hex);
}

Если это не так уж и плохо, я бы с этим согласился.Если это так, я переписал бы код и принял бы исправление с объяснением почему.