1

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

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

4

3 回答 3

0

试试这个：

$('#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');
});
于 2012-07-18T01:30:32.173 回答
0

单击复选框更改图像的工作演示：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;
}
于 2012-07-18T01:32:57.953 回答
0

方法调用$(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")');
    }
});
于 2012-07-18T01:36:52.663 回答