gpt4 book ai didi

javascript - 使用对话框不起作用?

转载 作者:行者123 更新时间:2023-12-03 02:09:45 25 4
gpt4 key购买 nike

我在对话框中遇到了一个小问题。由于某种原因,当我使用按钮 alert 时,我无法打开它,该按钮调用设置我的函数 openAlert()msg 变量设置为 1,旨在欺骗对话框打开。但由于某种原因它不起作用。

如果有人知道这是为什么,那将会非常有帮助。提前致谢。

var addOpen;
var msg;

function open_Add_Menu() {



if (addOpen == false) {

document.getElementById("new_org").className = "open";

document.getElementById("btn_new_org").innerHTML = "Cancel";

addOpen = true;

} else {

document.getElementById("new_org").className = "new_org";

document.getElementById("btn_new_org").innerHTML = "Add New Organisation";

addOpen = false;

}

}

function openAlert() {
var msg = 1;
}

$(function() {

$("#dialog1").dialog({

autoOpen: false,

show: {

effect: "puff",

duration: 300

},

hide: {

effect: "clip",

duration: 500

}

});

if (msg == '1') {

$("#dialog1").dialog("open");

}

$("#opener").on("click", function() {

$("#dialog1").dialog("open");

});

});
.org_container {
width: 20%;
margin: 15px 6.25% 6.25% 0px;
border: 2px solid #e1dfe1;
border-radius: 15px;
display: inline-block;
}

.org_container_active {
width: 20%;
margin: 15px 6.25% 6.25% 0px;
border: 2px solid #2bbe43;
border-radius: 15px;
display: inline-block;
}

.org_name {
padding: 5px 0px 5px 0px;
border-bottom: 2px solid #e1dfe1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-color: #f5f0f5;
text-align: center;
font-weight: bold;
}

.org_logo {
width: 100px;
margin: auto;
padding: 10px 0px 0px 0px;
}

.org_info {
padding: 5px 10px 10px 5px;
}

.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}

.btnSubmit {
width: 160px;
height: 30px;
float: left;
margin: 20px 0px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}

#new_org {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}

#new_org.open {
height: 430px;
}

#btnAdd {
padding: 20px 0px 0px 0px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog1" title="alert!">

<p>my alert body.</p>

</div>

<div id="btnAdd">

<button class="btnAdd" id="btn_new_org" onclick="open_Add_Menu()">Add New Organisation</button>

</div>

<form action="client_org_test.php" method="post">

<div id="new_org">

<div id="new_org_name">

<p>New Orgacnisation Name: *</p>

<input type="text" name="new_org_name_tb" id="new_org_name_tb" autocomplete="off" required>

</div>

<div id="new_org_add1">

<p>New Organisation Address Line 1: *</p>

<input type="text" name="new_org_add1_tb" id="new_org_add1_tb" autocomplete="off" required>

</div>

<div id="new_org_add2">

<p>New Organisation Address Line 2:</p>

<input type="text" name="new_org_add2_tb" id="new_org_add2_tb" autocomplete="off">

</div>

<div id="new_org_add3">

<p>New Organisation Address Line 3:</p>

<input type="text" name="new_org_add3_tb" id="new_org_add3_tb" autocomplete="off">

</div>

<div id="new_org_post">

<p>New Organisation Postcode: *</p>

<input type="text" name="new_org_post_tb" id="new_org_post_tb" autocomplete="off" required>

</div>

<div id="new_org_number">

<p>New Organisation Main Contact Number: *</p>

<input type="text" name="new_org_number_tb" id="new_org_number_tb" autocomplete="off" required>

</div>

<button class="btnSubmit" onclick="">Add</button>

</div>

</form>

<button class="btnSubmit" onclick="openAlert()">Alert</button>

最佳答案

您没有将全局 msg 设置为 1。在 openAlert 中,您正在创建一个新的 msg 变量,但从不使用它。如果您想更改全局变量,请不要使用 var 关键字,因为这将创建一个作用域为包含函数的新变量。

事实上,您的 openAlert 根本不执行任何操作。即使更改正确的变量也不会神奇地调用其他代码。 if (msg == '1') 仅运行一次,并且永远不会为 true。

通过单击调用实际代码的唯一(合理)方法是使用事件监听器,就像您已经使用 jQuery 所做的那样:

$("#opener").on("click", function() {
$("#dialog1").dialog("open");
});

奇怪的是,您的 HTML 不包含任何 ID 为 opener 的元素。

那么为什么不尝试一下呢?

$("#alertButton").on("click", function(){ // Instead of `#opener`.
$("#dialog1").dialog("open");
});
// You could also try `$("#alertButton, #opener")`.
<button id="alertButton" class="btnSubmit">Alert</button>

我不明白 msg 在这里如何帮助您,但如果您想通过此变量控制何时显示对话框,那么您可以尝试以下操作:

$("#alertButton").on("click", function() {
if(msg == 1){
$("#dialog1").dialog("open");
}
});

首先使用正确的类型:将 msg 定义为数字 1,但对照字符串 "1" 进行检查。

不要使用内联事件属性,例如 onclick。相反,请使用 jQuery 的 $(...).on 或标准 addEventListener

关于javascript - 使用对话框不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49629809/

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