根据输入到文本框中的数字显示div

Question

我想根据输入字段中的数字显示div。如果用户输入1，则不应显示任何来宾字段。如果用户输入2，则应显示.guest-0。如果用户输入3.guest-0和guest-1，应该显示等等。如果用户更改了他们的答案，它应该反映他们的变化。

<p>Attendees</p>
<input type="text" class="attendees" max="4">

<div class="guest-0">
    <span>guest 1 name</span>
    <span>guest 1 more</span>
</div>
<div class="guest-1">
    <span>guest 2 name</span>
    <span>guest 2 more</span>
</div>
<div class="guest-2">
    <span>guest 3 name</span>
    <span>guest 3 more</span>
</div>
<div class="guest-3">
    <span>guest 4 name</span>
    <span>guest 4 more</span>
</div>

<script>
    $('div[class*="guest-"]').hide();
</script>

这可以在jQuery或纯JS中完成。

Answer 1

$('.attendees').on('change', function(){
    $value = Math.max(0, Number(this.value) - 1);
    $('div[class*="guest-"]').hide().slice(0, $value).show();
});

jsFiddle

Answer 2

您可以使用input事件跟踪用户输入，然后获取输入和子字符串1的值以获取要显示的元素数，然后使用.slice()选择要显示的范围：

$('[class^="guest-"]').hide().slice(0, Math.max(0, this.value - 1)).fadeIn("slow");

使用选择器中的开始符号guest-将所有元素以^=开头：

$('[class^="guest-"]')

代码：

​

$('[class^="guest-"]').hide();

$('input.attendees').on('input', function() {
  $('[class^="guest-"]').hide().slice(0, Math.max(0, this.value - 1)).fadeIn("slow");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Attendees</p>
<input type="text" class="attendees" max="4">

<div class="guest-0">
  <span>guest 1 name</span>
  <span>guest 1 more</span>
</div>
<div class="guest-1">
  <span>guest 2 name</span>
  <span>guest 2 more</span>
</div>
<div class="guest-2">
  <span>guest 3 name</span>
  <span>guest 3 more</span>
</div>
<div class="guest-3">
  <span>guest 4 name</span>
  <span>guest 4 more</span>
</div>

​

Answer 3

下面是一个jQuery解决方案：

​

$('.guest').hide();

$('.attendees').change(function() {
  $('.guest').hide();
  var inputNum = $(this).val();
  $('.guest').each(function() {
    var displayNum = $(this).attr("display");
    if (inputNum > displayNum) {
      $(this).show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Attendees</p>
<input type="text" class="attendees" max="4">

<div class="guest" display="1">
  <span>guest 1 name</span>
  <span>guest 1 more</span>
</div>
<div class="guest" display="2">
  <span>guest 2 name</span>
  <span>guest 2 more</span>
</div>
<div class="guest" display="3">
  <span>guest 3 name</span>
  <span>guest 3 more</span>
</div>
<div class="guest" display="4">
  <span>guest 4 name</span>
  <span>guest 4 more</span>
</div>

​