[英]JQuery function to show element dependent on the value of hidden HTML input element
仅作为开头,我是JQUERY的绝对新手。
我正在尝试创建一个DOM ready函数,该函数接受一个隐藏的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
。 然后,客户端可以使用“ close-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 ) {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.