JQuery函数显示依赖于隐藏HTML输入元素值的元素
JQuery function to show element dependent on the value of hidden HTML input element
在回答之前,我对JQUERY绝对是个新手。
我正在尝试创建一个DOM就绪函数,它接受隐藏HTML输入字段的值,如果值是。。。然后显示某个<div>
类。
这是我的代码:
JS-更新
$(document).ready(function(){
var money = 19.95;
/* not sure if this is written correctly, but this is supposed to
check whether the hidden input element value is equal to var money */
if ($("input[id='VAT_shipping'][type='hidden']").val() == money ) {
$("#ac-wrapper").show();
$("#popup").show();
};
// hide popup when user clicks on close button
$(".close-btn").click(function(){
$("#ac-wrapper").hide();
// hide
});
// hides the popup if user clicks anywhere outside the container
$("#ac-wrapper").click(function(){
$("#popup").hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$("#ac-wrapper.").click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
});
});
HTML
<input type="hidden" id="VAT_shipping" value="<? print $shipping; ?>" />
<div id="ac-wrapper">
<div id="popup">
<center>
<p>
<strong> You have selected World Free Tax Zone - £19.95 for shipping. </strong>
We will automatically remove the VAT - 20% from your order.
Please click close to return to review your order.
</p>
<button class="close-btn">Close</button>
</center>
</div>
</div>
CSS
#ac-wrapper {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 200px; left: 375px;
font-size: 16px;
font-family: 'Oxygen', sans-serif;
text-align: center
}
.close-btn {
cursor: pointer;
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #AC9E33;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.close-btn:hover {
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #515280;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
因此,jQuery函数检查shipping
输入字段的值,如果它等于var money = 19.95
,则显示ac-wrapper
和嵌套的popup
。然后,客户端可以使用"关闭btn"或单击元素外部来关闭此窗口。
有人能解释一下怎么做吗。
您的第一个问题是
if ($("input[name='shipping']").val(money); ) {
应该是
if ($("input[id='shipping']").val() == money ) {
或
if ($("input[id='shipping'][type='hidden']").val() == money ) {
根据事物的外观,您试图根据下拉列表的值(在代码中说明)来确定是否显示弹出窗口。为此,您需要一个下拉列表。
<select id="shipping_dropdown" name="shipping_dropdown" required>
<option value="">Select shipping method</option>
<option value="25.00">Not this one</option>
<option value="19.95">This one</option>
</select>
接下来,您说要从隐藏的<input>
字段中读取值。为什么?这似乎没有必要。您可以执行以下操作来读取用户的选择。
<script type="text/javascript">
$(document).ready(function({
$("#shipping_dropdown").change(function(){
//Handler for when the value of this ID (shippping_dropdown) changes
if( $(this).val() == "19.95" ){
//Replace alert() with your pop-up
alert("You have selected World Free Tax Zone - £19.95 for shipping.");
}
});
});
</script>
请参阅此处的.change()函数。
您的代码
if ($("input[name='shipping']").val(money); ) {
//code
$('.ac-wrapper').show().css({'height' : docHeight});
$('.popup').css({'top': scrollTop+20+'px'});
});
两个语法错误
- 第一行:
if ($("input[id='shipping']").val()==money ) {
- 最后一行:
}
相关文章:
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- 访问代码生成的输入元素上的keyup事件
- 如何通过jQuery发送选定的元素和文本输入
- 使用 jQuery,当我在输入框外部单击时,如何更改输入元素的值
- 从IE中的不同元素调用时,文件输入控件未正确启动
- 使用jQuery切换来显示内容,但防止在用户单击输入元素时关闭
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 如何在dom元素中插入输入标记数据插件
- 根据输入文本按元素排序,AngularJS
- 更新最大滑块元素输入类型=文本
- 角度/动画引导元素(输入组)
- 如何创建表单元素输入框,标签使用javascript onclick
- 绑定到单击事件以查找子元素输入值
- 特定值元素输入未被读取
- 在JavaScript中将用户输入的元素输入到数组中
- JQuery隐藏元素输入问题遍历
- 如何找出表单是否没有任何元素(输入,选择)在jquery
- 使用表单元素(输入)初始化放大弹出菜单
- 如何获取所有子元素输入
- 基于子元素输入控制父元素:focus