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

我想根据输入字段中输入的数字显示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>

与会者

客人1姓名 客人1更多 客人2姓名 客人2更多 客人3姓名 客人3更多 客人4姓名 客人4更多 $（'div[class*='guest-“]'）。hide（）； 这可以在jQuery或纯JS中完成

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

---

您可以使用

input

事件跟踪用户输入，然后获取输入值并减去1以获取要显示的元素数，然后使用

.slice（）

选择要显示的范围：

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

使用选择器中的开始符号

^=

，以

guest-

开始的所有元素为目标：

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

代码：

$（'[class^=“guest-”]）.hide（）；
$（'input.attendes'）。在（'input'，function（）上{
$（'[class^=“guest-”]）.hide（）.slice（0，Math.max（0，this.value-1））.fadeIn（“慢”）；
})

与会者

客人1姓名
客人1更多
客人2姓名
客人2更多
客人3姓名
客人3更多
客人4姓名
客人4更多

这里有一个jQuery解决方案：

$（'.guest'）.hide（）；
$（'.Attendes'）.change（函数（）{
$（'.guest'）.hide（）；
var inputNum=$（this.val（）；
$（'.guest'）。每个（函数（）{
var displayNum=$（this.attr（“display”）；
如果（inputNum>displayNum）{
$（this.show（）；
}
});
});

与会者

客人1姓名
客人1更多
客人2姓名
客人2更多
客人3姓名
客人3更多
客人4姓名
客人4更多
请尝试以下方法：

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

$(".attendees").change(function() {
  inp = (parseInt($(this).text()) - 1);
  for( i = 0 ; i < inp ; i++)
    $(".guest-" + i).show();

});

$（'div[class*=“guest-”]）.hide（）；
$（“.attendes”）.change（函数（）{
inp=（parseInt（$（this.text（））-1）；
对于（i=0；i
您已经尝试了哪些内容但没有成功？此代码不包括
.show（）
或任何其他使相应div显示的方法。