JavaScript按钮相互冲突

您好，我的页面上有3个不同的按钮，用于更改页面的背景图像/颜色。 我的问题是，我的主切换按钮不会切换背景，一旦图像已设置为它使用的其他按钮之一

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

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

然后我可以用这个按钮设置背景图像

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

如果我没有按toggleClass按钮，则背景图像不会设置。 在我编辑它之前，必须在页面上设置.bgimg类

另一个问题是，一旦我设置了背景图像，.toggleClass按钮就不起作用了！bgimg类不进行切换

CSS:

HTML:

如果有人能告诉我什么代码是错误的或冲突的，这将是伟大的

如果我没有按toggleClass按钮，则背景图像不会设置。在我编辑它之前，必须在页面上设置.bgimg类

另一个问题是，一旦我设置了背景图像，.toggleClass按钮就不起作用了！bgimg类不进行切换

您混合了两种不同的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中定义两种不同的样式，并使用

toggleClass

在两者之间切换，或者将类

bgimg

始终保留在元素上，并使用

$（'.bgimg'）.css（'background-image'，''）

删除背景图像和要添加/更改的现有代码。

我认为代码不完整，无法理解您的冲突。您能在JSFIDLE上创建一个这样的页面吗：使用完整的代码？是的，我尝试过，但由于某些原因JQuery对话框无法工作。我确实包含了JQuery UI，但仍然没有成功。我也不认为我给你的代码有任何遗漏？HTML与JavaScript一起使用。我唯一遗漏的是打开对话框的按钮：）非常感谢！最后，我决定在元素上始终使用

.bgimg

。）

$(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;
});

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

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