在引导模式中隐藏 div 元素答案

【问题标题】：Hiding div elements within a boothstrap modal在引导模式中隐藏 div 元素
【发布时间】：2012-07-21 18:01:07
【问题描述】：

我正在尝试使用 twitter bootstrap modal 和 jquery 根据上一个下拉问题中的选择来显示模态中的 div 数量。也就是说，如果选择 1 则只显示模态中的一个 div，如果选择 3 则显示模态中的三个 div。

过滤问题：

    <select id='species1'>
    <option value="">Number of Species</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    </select>

    <div class='btn btn-primary'><button type="button" id="nextbttn">Next</button></div>

这是模态脚本：

<div class="modal hide fade in" style = "width:950px; left:25%; display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
</div>

<div class="modal-body">
<table border=1>
<div id="ftype1">
<tr>
<td colspan=3>
<h3><center>ITEM 1</center></h3>
</td>
</tr>
<tr>
<td>
    <select id='xtype1'>
    <option value="">Type 1</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype1 -->

<!------------------------------------------------ -->

<div id="ftype2">
<tr>
<td colspan=3><h3><center>ITEM 2</center></h3></td>
</tr>
<tr>
<td>
    <select id='xtype2'>
    <option value="">Type 2</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype2 -->

<!------------------------------------------------ -->

<div id="ftype3">
<tr>
<td colspan=3><h3><center>ITEM 3</center></h3></td>
</tr>
<tr>
<td>
    <select id='xtype3'>
    <option value="">Type 3</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype3 -->

<div class="modal-footer">
<div class='btn btn-primary'><input name="commit" type="submit" value="Submit" /></div>
<div class="btn" data-dismiss="modal">Close</div>
</div>
</div>

我尝试了以下 jquery 脚本：

$(document).ready(function() {
    $("#nextbttn").click(function() {
        var type1 = $('#species1').val();
        if (type1 != '00') {
            if (type1 == '01') {
                $('.modal').modal({
                    backdrop: false
                });
                $('#ftype2').hide();
                $('#ftype3').hide();
            }
        }
    });
});

但是 div ftype2 和 ftype3 并没有被隐藏。

我的问题是实现这一目标的最佳方法是什么？

谢谢克里斯

【问题讨论】：

模态窗口的标记中有拼写错误。您能否修复它们，所以我们知道这不是问题所在。例如，有少数属性缺少引号（例如，class 对应于id="ftype3"）。另外，nextbttn 在哪里？由于这是触发器，因此包含其标记并指示其上下文是有意义的。
感谢 Merv... 认为我发现了所有错别字并添加了触发模式的按钮的代码。
不。 border=1、colspan=5 不是有效的 XML。
这会阻止 div 被隐藏吗？我怎样才能完成我想要的？？

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

您的选择器很好，但问题是您不能在 table 中直接使用 div；仅在 td 或 th 中。如果您想隐藏表格中的一行，请提供行 ID，然后选择它们进行隐藏。

<table>
  <tr id="row1"><td><!-- stuff --></td></tr>
  <tr id="row2"><td><!-- stuff --></td></tr>
  <tr id="row3"><td><!-- stuff --></td></tr>
</table>

$('#row3').hide(); // hide row3

【讨论】：

谢谢你的解释和解决方法！！