Как получить цвет и сразу же применить его к определенным элементам

Рейтинг: 0Ответов: 1Опубликовано: 11.04.2015
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var f = $.farbtastic('#picker');
        var p = $('#picker').css('opacity', 0.25);
        var selected;
        $('.colorwell')
        .each(function () { f.linkTo(this); })
        .focus(function() {
            if (selected) {
                $(selected).removeClass('colorwell-selected');
            }
            f.linkTo(this);
            p.css('opacity', 1);
            $(selected = this).addClass('colorwell-selected');
        });
    });
</script>

<form action="method_post.php" method="post" style="width: 500px;">
    <div id="picker" style="float: right;"></div>
    <div class="form-item">
        <label for="color1">Цвет 1:</label>
        <input type="text" id="color1" name="color1" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color2">Цвет 2:</label>
        <input type="text" id="color2" name="color2" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 3:</label>
        <input type="text" id="color3" name="color3" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 4:</label>
        <input type="text" id="color4" name="color4" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 5:</label>
        <input type="text" id="color5" name="color5" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 6:</label>
        <input type="text" id="color6" name="color6" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 7:</label>
        <input type="text" id="color7" name="color7" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 8:</label>
        <input type="text" id="color8" name="color8" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 9:</label>
        <input type="text" id="color9" name="color9" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 10:</label>
        <input type="text" id="color10" name="color10" class="colorwell" value="#eadc9a" />
    </div>
    <input type="submit" value="Отправить">
</form>

К каждому из input присвоен уникальный id и в каждый input при помощи скрипта прописывается определенный цвет. Подскажите как сразу же, на лету (без обновления страницы) получить цвет определенного input и применить его к ссылкам на странице или определенным блокам?

То есть, наверное нужно записать куда то этот цвет и сразу же его применить к одному из div или к определенным ссылкам.

Просто не большой (но понятный) пример как получить, а потом применить - покажите. спасибо огромное

Ответы

▲ 1

Подписывайся на изменение значений input'ов примерно так:

$(".colorwell").change(handler);

После чего, в функции обратно вызова получай значение конкретного input'a и что-то с ним делай (обновляй другие элементы на странице):

$(".colorwell").change(function () {
    console.log($(this).val()); // выведен значение конкретного инпута
});