Arhn - архитектура программирования

Изменить фоновое изображение при установке флажка Jquery?

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

$('#patterns, #solid').click(function() {           
    var pattern = $(this).val();                    
    if ($('input:checkbox').is(':checked')) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")'); 
    } 
    else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }           
});

У меня есть в html один выбор со значениями параметров для прозрачных шаблонов, а также флажок с надписью Установите этот флажок, если вы хотите использовать сплошные шаблоны. Большое спасибо.

<label for="pattern">Choose Pattern</label>
        <select id="patterns" name="pattern">
            <option value="absurdidad">absurdidad</option>
            <option value="arches">arches</option>
            <option value="argyle">argyle</option>
            <option value="batthern">batthern</option>
        </select>

        <label for="solid">Use only solid patterns</label>
        <input type="checkbox" id="solid" />

Если я поставлю css('background-color', 'red'); } else { css('фоновый цвет', 'черный') }; Работает как шарм, при нажатии сразу срабатывает и меняет цвет фона, сохраняет прозрачный узор и добавляет цвет фона, но не фоновое изображение.

checkbox jquery background-image
18.07.2012

  • Попробуйте использовать классы css, а затем используйте методы .addClass и .removeClass... 18.07.2012
  • Использование классов css для изображений займет много времени, хочу, чтобы это было просто, что, если у меня есть 100 изображений x 2 = 200... Я не вижу смысла в использовании классов 18.07.2012
  • @cula Правильно ли указан путь к фоновому изображению? 18.07.2012
  • @Russ Ferri Да, это так, проверил это перед внедрением ckeckbox, также он меняет изображения bg, но сначала нужно установить флажок, а не выбирать из раскрывающегося списка ... Я хочу, чтобы щелкнуть немедленно, чтобы изменить изображение 18.07.2012

Ответы:


1

Вызов метода $(this).val() возвращает значение флажка. Из вашего фрагмента html шаблон должен быть значением параметра, выбранного в поле со списком.

Если я правильно понимаю, это должно выполнить то, что вы ищете:

// Update the background image on the body tag when:
//   a) A new pattern is selected, or
//   b) The solid checkbox is checked or unchecked
$('#patterns, #solid').change(function() {  
    var pattern,
        isSolid;

    // Get the pattern from the value selected in #patterns.    
    pattern = $('#patterns option:selected').val();

    // Use a solid background if #solid is checked.
    isSolid = $('#solid').is(':checked');

    if (isSolid) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")');  
    } else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }
});
18.07.2012
  • вы правите, это работает как шарм, просто при первом щелчке дает мне пустой (только цвет фона), и после того, как я меняю на другой шаблон, дает мне правильный, а позже, если я сниму флажок, снова дает мне прозрачный шаблон, что хорошо, просто первая проверка ничего не дает мне, только цвет фона, например, удаляет его. и спасибо всем за участие и ответы. 18.07.2012
  • @cula Отлично, рад помочь! Пожалуйста, примите самый полезный ответ, когда вы будете удовлетворены. 18.07.2012

    • 2

    Рабочая демонстрация для смены изображения по щелчку флажка: http://jsfiddle.net/FWNTQ/

    код

    $('#checkboxID').click(function() {
    var newImg = new Image;
    newImg.onload = function() {

        $('#myimage').attr('src', this.src).removeClass('loading');
        $('#container .loader').hide();
    }
    $('#container .loader').show();
    $('#myimage').addClass('loading');
    if ($(this).is(':checked')) {
        newImg.src = 'http://images4.wikia.nocookie.net/__cb20111016234902/maditsmadfunny/images/thumb/5/54/Hulk-from-the-movie.jpg/180px-Hulk-from-the-movie.jpg';
    } else {
        newImg.src = 'http://www.hybrideb.com/content/evidence/doubletree.png';
    }

});

    CSS

    #container .loader{
    position:absolute;
    left:50px;
    top:50px;
    z-index:999;
    display:none;
}
#container{
    position:relative;
}
.loading{
 opacity:.5;
}
    18.07.2012

    3

    Попробуй это:

    $('#patterns').on('change', function() {
    var pattern = $(this).val(),
        url;
    if ($('#solid').is(':checked')) {
        url = "images/patterns/solid/" + pattern + ".png";
    } 
    else {
        url = "images/patterns/" + pattern + ".png";
    }           
    $('body').css('background-image', 'url(' + url + ')');
}).trigger('change');
$('#solid').click(function() {
    $('#patterns').trigger('change');
});

    Если это работает, то это должно упроститься до:

    var $patterns = $('#patterns').on('change', function() {
    var str = $solid.is(':checked') ? 'solid/' : '';
    $('body').css('background-image', 'url(images/patterns/' + str + $(this).val() + '.png)');
}).trigger('change');
var $solid = $('#solid').click(function() {
    $patterns.trigger('change');
});
    18.07.2012
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..