Question

我正在建立一个表格，首先询问你是否有'foo'。如果答案为“是”，则出现div并询问“你有多少foo”？根据回答的数量，我只想展示那么多div。因此，如果用户回答1，则仅显示第一个div。如果他们回答三个，前三个将显示。我已设置好，如果用户回答否，则金额问题仍然隐藏，但如果他们回答是，则会提示他们输入数量。这是我到目前为止所得到的......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<!--jQuery-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <link rel="stylesheet" href="files/mem_health_panel.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.fabacherinteractive.com/slider/themes/default.css" type="text/css" media="screen" />

<style>

ul
{
list-style-type:none;
}
</style>

<script type="text/javascript">

$(document).ready(function(){

    $(window).load(function() {
        $('#amt_of_foo,.foo_panels,.next').hide();
        });

    $('#yes_foo').click(function() {
        $('#amt_of_foo').show();
        });

    $('#no_foo').click(function() {
        $('.foo_panels,#amt_of_foo,.section_panel').hide();
        $('.next').show();
        });

});

    </script>

</head>
<body>


<ul>
<li>
<div class="panel section_panel">
    <h2>Questions About Your Foo</h2>
        <span>Do you have foo?:</span><br />
        <input type="radio" name="foo" id="no_foo" /> No <br />
        <input type="radio" name="foo" id="yes_foo" /> Yes: <br/>
        <span id="amt_of_foo">
        <span>How many foo do you have?:</span>     
        <span><input id="qty_of_foo" type="text" size="5" />
        </span>
        </span>
</div>
</li>

<!--answers yes to foo, and enters amount-->

<div class="foo_panels">
<li>

        <li>
        <div class="panel foo_1">
        <h1>First foo's information</h1>
        <span>Foo name:&nbsp;<input type="text" size="20" /></span>
        </div>
        </li>

        <li>
        <div class="panel foo_2">
        <h1>Second foo's information</h1>
        <span>Foo name:&nbsp;<input type="text" size="20" /></span>
        </div>
        </li>

        <li>
        <div class="panel foo_3">
        <h1>Third foo's information</h1>
        <span>Foo name:&nbsp;<input type="text" size="20" /></span>
        </div>
        </li>
</div>

<!--answers no to foo-->

        <li>
        <div class="panel next">
        <h1>Next Question, if no foo</h1>
        </div>
        </li>

</ul>
</body>
</html>

ul用于jQuery“slider”插件。 'panel'类用于全局css。

Answer 1

我会为数量输入使用更改处理程序。当它发生变化时，从其值中获取要显示的数字。使用选择器获取要在集合中显示的相应元素，并按照相对于要显示的数字的索引对其进行过滤。

$('#qty_of_foo').change( function() {
    var show = parseInt($(this).val() || 0);
    $('#foo_panels > li').hide();
    $('#foo_panels').find('.panel')
                    .parent()
                    .filter( function(i) { return i < show; } )
                    .show();
});

你也可以对切片做同样的事情，但是你可能需要做更多的错误检查。

$('#qty_of_foo').change( function() {
    var show = parseInt($(this).val() || 0);

    if (show <= 0) return true;

    $('#foo_panels > li').hide();
    $('#foo_panels').find('.panel')
                    .parent()
                    .slice( 0, show - 1 )
                    .show();
});

Answer 2

首先，将“foo_panels”设为id是更优化的。然后你会希望你的小组li有一个像'panel'这样的类：

<li class"panel">
  <div class="foo_1">
  <h1>First foo's information</h1>
  <span>Foo name:&nbsp;<input type="text" size="20" /></span>
  </div>
</li>

然后，您可以使用.slice()

隐藏/显示面板数量

$(".panel").hide();
var panels = $(".panel", "#foo_panels"); //set panels group
$('#qty_of_foo').change( function() {
  $(panels).hide(); //hide any previously shown panels
  $(panels).slice(0, parseInt($(this).val())).show(); //show the slice
});

此外，您希望在<li>之后立即摆脱那个孤立的<div class="foo_panels">。您<div>中的<ul>也不能包含在<li>中。

更新：我创建了一个jsFiddle that demonstrates the code（并且在此过程中发现了我已发布的错误，我已经修复过。

使用javascript，根据答案显示一定数量的div

2 个答案: