我目前正在尝试在jquery ui alert dialog
按钮点击事件中设置div的背景。用户单击一个按钮,然后会显示用户从select
选项中选择图像的对话框。当他们点击Choose Background
(属于jqueryUI dialog alert
的按钮时)。它应该改变div`class =“middle-side”“背景。我以前做过这个,但按钮是html元素的一部分。我已经完成了这个常规按钮但不是对话框的一部分。如何在单击警报按钮时更改div的背景? JSFIDDLE - P.S. jsfiddle显示来自外部源的图像的问题
jQuery的:
$('#backgroundPick').click(function (e) {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
HTML
<!-- Triggers and shows Alert Dialog -->
<button id="backgroundPick">Choose Background</button>
<!-- Alert Dialog -->
<div id="dialog-confirm" title="Choose Background">
<select class="image-picker show-labels show-html">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
</div>
<!-- Display background here -->
<div class="middle-side"></div>
答案 0 :(得分:1)
首先,我将通过使用autoOpen: false
初始化来从点击功能中删除对话框的创建。这样可以使您的代码更清晰,也不会将对话框代码保留在DOM树中,直到用户点击&#34;选择背景&#34;。
其次,我假设您希望第一个按钮为&#34;更改背景&#34;,而不是&#34;删除所有项目&#34;。
因此,要回答您的问题,请在回调按钮中,抓取img-src
选项中:selected
的数据。然后设置.middle-side
div:
$("#dialog-confirm").dialog({
resizable: false,
height: 230,
modal: true,
autoOpen: false, // Initialize the dialog, but don't open it
buttons: {
"Choose background": function () {
$(this).dialog("close");
var img = $('#dialog-confirm select option:selected').data('img-src');
$('.middle-side').css('background-image', 'url("'+img+'")');
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#backgroundPick').click(function() {
$("#dialog-confirm").dialog( "open" ); // Open the dialog on click
});
答案 1 :(得分:0)
只需为您的<select>
$(document).on("change", ".image-picker", function(){
$(".middle-side").css("background", $(this).data("img-src"));
});
正如我在评论中提到的那样编辑,你的问题确实没有意义。一旦有人点击“选择背景”按钮,你想要改变背景。但是此按钮会打开一个对话框,您可以在其中选择图像。在您甚至不知道用户将要选择的内容之前,您无法更改背景。