我想根据输入字段中输入的数字显示 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 来完成
最佳答案
$('.attendees').on('change', function(){
$value = Math.max(0, Number(this.value) - 1);
$('div[class*="guest-"]').hide().slice(0, $value).show();
});
关于javascript - 根据文本框中输入的数字显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47871381/