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

P16_COLLECTION

jsFiddle

Answer 2

您可以使用input事件跟踪用户输入，然后获取输入值并减去1以获取要显示的元素数量，然后使用{{1}选择要显示的范围：

.slice()

使用选择器中的起始符号$('[class^="guest-"]').hide().slice(0, Math.max(0, this.value - 1)).fadeIn("slow");，使用guest-定位所有元素：

^=

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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();

});

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

4 个答案: