0

こんにちは私はページの背景画像/色を変更するために使用される私のページに3つの異なるボタンがあります。私が抱えている問題は、他のボタンの1つを使用して画像を設定すると、メインのトグルボタンが背景をトグルしないことです。

この機能を実行するボタンを押すと...

$( "body" ).toggleClass( "bgimg", 1000 );

次に、このボタンを使用して背景画像を設定できます。

$("#SetBG").click(function() {

トグルクラスボタンを押さないと、背景画像が設定されません。編集する前に、ページに.bgimgクラスを設定する必要がありますか？

もう1つの問題は、背景画像を設定すると、.toggleClassボタンが機能しないことです。クラス.bgimgはトグルしません。

CSS：

body {
margin: 0px;
padding: 0px;
border: 0px;
}

.bgimg {
}

HTML：

<input type="text" id="ImageURL"></input>
<button id="SetBG">Set Background</button>
<button id="ReSetBG">Re-Set</button>

JavaScript：

$(function() {
    $( "#DialogBackground" ).dialog({
    open: function (event, ui) {$(".ui-widget-overlay").css({opacity: 0, filter: "Alpha(Opacity=00)"});},
    modal:true,
    autoOpen:false,
    height:450,
    width:450,
    resizable: false,
    buttons: [{
        id:"remove",
        text: "Remove/Add Background",
        click: function() {
        $( "body" ).toggleClass( "bgimg", 1000 );
        return false;
        }
    }]
    });

$("#SetBG").click(function() {
    var URL = document.getElementById("ImageURL").value;
    $(".bgimg").css('background-image',"url(" +URL +")");
    return false;
});

$('#ReSetBG').click(function() {
$('.bgimg').css('background-image', "url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')");
return false;
});

誰かがどのコードが間違っているか、または矛盾しているのかを教えていただければ、それは素晴らしいことです。

4

1 に答える 1

1

toggleClass ボタンを押さないと、背景画像は設定されません。編集する前に.bgimgクラスをページに設定する必要がありますか?

別の問題は、背景画像を設定すると、.toggleClass ボタンが機能しないことです。クラス .bgimg はトグルしません。

インライン ルールとスタイルシート ルールの 2 つの異なる CSS コンセプトを混同しています。次のようなことを言うとき、あなたは何をしていますか:

$('.bgimg').css('background-image', "url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')");

クラス名bgimgを持つ要素をターゲットにして、このインライン css ルールを適用します。

background-image: url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')"

したがって、クラスを持つ要素がない場合、bgimg何も起こりません。ただし、存在する場合は、インラインCSS ルールが適用されます。クラスを削除しても、css はクラスごとにスタイルシートで定義されているのではなく、要素自体で定義されているため、何も変わりません。あなたのものをあなたが望むように動作させるには、CSSで2つの異なるスタイルを定義しtoggleClass、2つを切り替えるために使用するか、bgimg常に要素にクラスを残し$('.bgimg').css('background-image', "")て背景画像と既存のコードを削除するために使用する必要があります。追加/変更。

于 2012-12-26T20:31:16.323 に答える