Question

我正在尝试更改正文上的背景图像，我有透明和实体图案图像并且有以下代码：

$('#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（'background-color'，'black'）};像魅力一样工作，点击立即触发并更改背景颜色，保持透明图案并添加背景颜色，但不添加背景图像

Answer 1

试试这个：

$('#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');
});

Answer 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;
}

Answer 3

方法调用$(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")');
    }
});

检查复选框Jquery时更改背景图像？

3 个答案: