jQuery似乎不适用于浏览器
[英]jQuery doesn't seem to be working on browsers
问题描述
我试图根据在下拉菜单中所做的选择隐藏/显示字段。
jQuery的代码似乎没有占用。 有什么建议么？ jQuery新手。 我将文件另存为.php
jQuery的：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
$(document).ready(function() {
$.viewMap = {
'0' : $([]),
'view1' : $('#view1'),
'view2' : $('#view2a, #view2b'),
'view3' : $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
});
});
</script>
</head>
HTML：
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1">
<!-- content -->
</div>
<div id="view2a">
<!-- content -->
</div>
<div id="view2b">
<!-- content -->
</div>
<div id="view3">
<!-- content -->
</div>
3 个解决方案
解决方案1
2 已采纳 2016-01-06 13:09:22
解决方案2
1 2016-01-06 13:36:42
ID应该是唯一的。 在您的代码中，有2个具有相同id viewSelector选择。 您可以删除一组。
给每个div一个普通的类，例如；
<div class="views" id="view3">
然后尝试使用此类隐藏所有div。 然后在下拉菜单中显示所需的div。 整个代码可能看起来像；
$.viewMap = {
'0': $([]),
'view1': $('#view1'),
'view2': $('#view2a, #view2b'),
'view3': $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$(".views").hide();
// show current
$.viewMap[$(this).val()].show();
});
这是一个演示。 希望这可以帮助。
解决方案3
0 2016-01-06 13:09:07
请尝试以下代码：
jQuery的：
$(document).ready(function() {
$('#viewSelector').change(function() {
$('.view').hide();
// show current
if($(this).val() !== 0){
if($(this).val() == "view2"){
$("#view2a, #view2b").show();
}else{
$("#"+ $(this).val()).show();
}
}
});
});
HTML：
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1" class="view">
<!-- content -->
</div>
<div id="view2a" class="view">
<!-- content -->
</div>
<div id="view2b" class="view">
<!-- content -->
</div>
<div id="view3" class="view">
<!-- content -->
</div>
简单的jQuery addClass（）似乎不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.