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

Question

我想根据输入字段中输入的数字显示 div。如果用户输入 1，则不会显示任何访客字段。如果用户输入 2 .guest-0 应显示。如果用户输入 3. guest-0 和 guest-1 应显示，依此类推。如果用户更改他们的答案，它应该反射(reflect)他们的更改。

<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