0

嗨，我的页面上有 3 个不同的按钮，用于更改页面的背景图像/颜色。我遇到的问题是，一旦使用其他按钮中的一个将图像设置为背景，我的主切换按钮就不会切换背景。

如果我按下运行此功能的按钮...

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

然后我可以使用此按钮设置背景图像。

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

如果我不按 toggleClass 按钮，则不会设置背景图像。就像必须在页面上设置 .bgimg 类一样，我才能对其进行编辑？

另一个问题是，一旦我设置了背景图像，.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在两者之间切换或将类bgimg始终保留在元素上并用于$('.bgimg').css('background-image', "")删除背景图像和现有代码添加/更改。

于 2012-12-26T20:31:16.323 回答