Используя JavaScript, покажите определенное количество дел на основе ответа - PullRequest
Новая
       17

Используя JavaScript, покажите определенное количество дел на основе ответа

1 голос
/ 21 мая 2010

Я создаю форму, которая сначала спрашивает, есть ли у вас 'foo'. Если ответ «Да», появляется div и спрашивает «Сколько у вас есть foo»? Исходя из количества ответов, я хотел бы показать только столько дел. Таким образом, если пользователь ответит 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.

Ответы [ 2 ]

1 голос
/ 21 мая 2010

Я бы использовал обработчик изменений для ввода количества.Когда это изменится, получите число, чтобы показать от его значения.Используйте селектор, чтобы получить соответствующие элементы для отображения в коллекции и отфильтровать их по индексу относительно номера для отображения. 

$('#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();
});
0 голосов
/ 21 мая 2010

Прежде всего, было бы более оптимально, чтобы "foo_panels" был идентификатором. Тогда вы захотите, чтобы у вашей панели 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 ()

1008 * 

$(".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, который демонстрирует код (и в процессе обнаружил ошибку в том, что я написал, которую я исправил.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...