JavaScript按钮互相冲突

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

如果我按运行该功能的按钮...

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

如果有人能请告诉我什么代码是错误或相互矛盾的，这将是巨大的。

来源

2012-12-26 ChristopherStrydom

我认为代码不完整，不了解您的冲突。你可以在jsfiddle上创建一个像这样的页面：http://jsfiddle.net/MrRDq/带有完整的代码？ – Danilo

是的，我试图但由于某种原因，JQuery对话框不工作。我确实包含了JQuery UI，但仍然没有运气。此外，我不认为有什么代码缺失形式，我给你？HTML与JavaScript一起，我唯一遗漏的就是打开对话框的按钮:) – ChristopherStrydom

如果我不按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-26 20:31:16 scrappedcola

非常感谢！我决定总是在元素的'.bgimg'结尾:) – ChristopherStrydom

JavaScript按钮互相冲突

回答

相关问题