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

If i don't press the toggleClass button then the background image does not set. Its like the .bgimg class has to be set on the page before i can edit it?

Another problem is that once i have set the background image the .toggleClass button doesnt work! the class .bgimg does not toggle.

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