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按鈕互相沖突

回答

相關問題