Question

您好我的页面上有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;
});

如果有人能告诉我哪些代码错误或相互矛盾会很棒。

Answer 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', "")删除背景图片和要添加/更改的现有代码。

JavaScript按钮相互冲突

1 个答案: