您好,我的页面上有 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;
});
如果有人可以告诉我什么代码是错误的或冲突的,那就太好了。
最佳答案
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', "")
删除背景图像和要添加/更改的现有代码。
关于JavaScript 按钮相互冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14035066/