JQuery Удаление дубликата кода - более простое решение? - PullRequest
Новая
       10

JQuery Удаление дубликата кода - более простое решение?

1 голос
/ 13 декабря 2011

Я работаю над somethign, где у меня есть два поля ввода, одно для основного цвета и одно для вторичного цвета. Я использую JSColor , поэтому при нажатии на поле ввода появляется палитра цветов, а при изменении цвета фон ввода меняется на этот цвет.

Ну, я хочу иметь еще одну особенность, где у меня могут быть "готовые" цвета, которые кто-то может выбрать форму. Итак, вот что у меня есть: 

<a id="standardTheme">Standard Theme</a>
<a id="themeTwo">Theme Two</a>

и т. Д. И JQuery у меня есть: 

$('#standardTheme').click(function() {
    var primaryPicker = new jscolor.color(document.getElementById('primaryColor'), {})
        primaryPicker.fromString('FF0000')

    var secondaryPicker = new jscolor.color(document.getElementById('secondaryColor'), {})
        secondaryPicker.fromString('000000')
});

Который работает идеально. Ну, для themeTwo мне придется продублировать весь этот код и вручную ввести новые шестнадцатеричные цвета, которые я хочу для темы 2.

У меня может быть 5 или 6 тем на выбор, чтобы они могли быть очень длинными. Мне было интересно, может ли кто-нибудь помочь мне улучшить код, если есть более простой способ сделать это, более короткий и более гибкий, когда я хочу добавить больше тем?

Спасибо!

1 Ответ

3 голосов
/ 13 декабря 2011

Почему бы просто не связать данные с кнопкой, которую вы нажимаете? 

<button class="themeButton" data-primary-color="FF0000" data-secondary-color="000000">Standard</button>

Тогда в jQuery: 

 $('.themeButton').click(function()
 {
     var primaryColor = $(this).data('primary-color');
     var secondaryColor = $(this).data('secondary-color');

     // OR the more verbose way

     var primaryColor = $(this).attr('data-primary-color');
     var secondaryColor = $(this).attr('data-secondary-color');

     // Do your code with the primary and secondary color text
 });

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

...