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 に答える