JavaScript 按钮相互冲突

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 类的元素，则不会发生任何事情。但是，如果它确实存在，则将应用 inline css 规则。如果您删除该类，则不会发生任何变化，因为 css 不是按类在样式表中定义的，而是在元素本身上定义的。为了让你的东西按照你想要的方式工作，你需要在你的 CSS 中定义 2 种不同的样式并使用 toggleClass 在两者之间切换，或者始终将类 bgimg 留在元素上并使用 $('.bgimg').css('background-image', "") 来删除背景图像和现有代码以添加/更改。