テキストボックスに入力された数字に基づいて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> 

これは、あなたが入力してsubstract 1の値を取得し、その後、ユーザー入力のinputイベントを使用して追跡することができ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

のいずれかで行うことができます表示する要素の数を取得するには、.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>

Answer 4

嘆願はこれを試してみてください。

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

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

});