gpt4 book ai didi

javascript - 单击警报按钮时更改 div 背景

转载 作者:行者123 更新时间:2023-12-03 11:54:47 26 4
gpt4 key购买 nike

我目前正在尝试在 jquery ui 警报对话框 按钮单击事件上设置 div 的背景。用户单击一个按钮,就会弹出一个对话框,用户可以在其中从 select 选项中选择图像。当他们点击选择背景(该按钮是jqueryUI对话框警报的一部分)时。它应该更改 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>

最佳答案

首先,我将通过使用 autoOpen: false 进行初始化,从单击函数中删除对话框的创建。这使您的代码更加清晰,并且在用户单击“选择背景”之前不会将对话框代码保留在 DOM 树中。

其次,我假设您希望第一个按钮是“更改背景”,而不是“删除所有项目”。

因此,要回答您的问题,请在按钮的回调中,获取 :selected 选项中 img-src 的数据。然后设置.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
});

演示:http://jsfiddle.net/jtbowden/ohdbu94y/

关于javascript - 单击警报按钮时更改 div 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25650552/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com