我有这段代码:
$(document).ready(function() {
$('#viewAll').hide();
$('#viewProductIframe').hide();
$('#viewIngredientIframe').hide();
$('#viewPackagingIframe').hide();
$.viewMap = {
'viewEmpty' : $('#viewEmpty'),
'viewAll' : $('#viewAll'),
'viewProductIframe' : $('#viewProductIframe'),
'viewIngredientIframe' : $('#viewIngredientIframe'),
'viewPackagingIframe' : $('#viewPackagingIframe')
};
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
});
});
它应该显示/隐藏一组div。实际上只显示viewProductIframe
div。
起初我有4个div,没有iframe显示数据库中的表。我将这些div的内容放入" viewAll"并添加了" viewProductIframe"和另外两个。
这种变化显然打破了代码,我无法找到原因。
我的下拉菜单:
<select name="viewSelector" id="viewSelector">
<option name="viewEmpty" value="viewEmpty">Select an Option</option>
<option name="viewAll" value="viewAll">All</option>
<option name="viewProductIframe" value="viewProductIframe">Products</option>
<option name="viewIngredientIframe" value="viewIngredientIframe">Ingredients</option>
<option name="viewPackagingIframe" value="viewPackagingIframe">Packaging</option>
</select>
唯一出现的div:
<div id="viewProductIframe" name="viewProductIframe">
<h2>Product</h2>
<iframe src="products.php" class="displayFrame" />
</div>
另一个iframe div仍然是隐形的:
<div id="viewIngredientIframe" name="viewIngredientIframe">
<h2>Ingredients</h2>
<iframe src="ingredients.php" class="displayFrame" />
</div>
有谁知道问题是什么?
答案 0 :(得分:1)
尝试以下代码
1)为所有div设置公共类我添加了类common
,例如
<div id="viewProductIframe" name="viewProductIframe" class="common">
<h2>Product</h2>
<iframe src="products.php" class="displayFrame" />
</div>
<div id="viewIngredientIframe" name="viewIngredientIframe" class="common">
<h2>Ingredients</h2>
<iframe src="ingredients.php" class="displayFrame" />
</div>
jquery是
$(document).ready(function() {
$(".common").hide();
$('#viewSelector').change(function() {
$(".common").hide(); // hide all divs
var id = $(this).find("option:selected").val(); // get current val
$("#" + id).show() // show current div id
});
});