使用jquery

Question

我是jQuery的新手，我似乎无法弄明白......

我想要求用户输入天数，至少1天，最多4天。 所以，如果他们输入“3”，那么显示的将是： 第1天 第2天 第3天

我无法弄清楚如何使这些可点击，因此如果点击第2天，则会显示div id day2的内容，如果他们点击第3天，第2天就会消失，第3天内容会显示。

我想要制作的现有div，以及我从用户那里获得输入以了解要显示的天数：

$(window).load(function(){
  $('form').submit(function() {
    $('#days').empty();
    var inputNumber = $('#inputNumber').val(); 
    if (inputNumber>0) {
      for (i=0; i < inputNumber; i++) {
        $('<div id="#showdays' + i + '" />').text('Div: ' + (i+1)).appendTo('#days');
      }
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="days">
  <ul>
    <li><a href="#day1">Day 1</a></li>
    <li><a href="#day2">Day 3</a></li>
    <li><a href="#day3">Day 3</a></li>
    <li><a href="#day4">Day 4</a></li>
  </ul>
  <div id="day1">first day content</div>
  <div id="day2">second day content</div>
  <div id="day3">third day content</div>
  <div id="day4">fourth day content</div>
</div>

Below is where I get input from user to know how many days to display:


<form action="#" method="post">
  <label for="inputLabel">Number of days:</label>
  <input id="inputNumber" name="inputNumber" type="number" step="1"  min="1"  max="4"/>
  <input type="submit" value="Enter" />
</form>

<div id="days"></div>

我在考虑将div作为数组可能会有所帮助，但我真的不知道解决这个问题的最佳方法。 任何见解都会有所帮助，谢谢。

Answer 1

这是你在jQuery中寻找的代码：

$(window).load(function(){
  $('form').submit(function(e) {
    var inputNumber = $('#inputNumber').val();
    if (inputNumber>0) {
      $('div[id^="day"], #days > ul > li').not('#days').hide();
      $('#days > ul > li:lt(' + inputNumber + ')').show();
    }
    return false;
  });

  $('div[id^="day"], #days > ul > li').not('#days').hide();

  $(document).on('click', 'a[href^="#day"]', function(e) {
    e.preventDefault();
    $('div[id^="day"]').not('#days').hide();
    $($(this).attr('href')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="#" method="post">
    <label for="inputNumber">Number of days:</label>
    <input id="inputNumber" name="inputNumber" type="number" step="1"  min="1"  max="4"/>
    <input type="submit" value="Enter" />
</form>
<div id="days">
    <ul>
        <li><a href="#day1">Day 1</a></li>
        <li><a href="#day2">Day 2</a></li>
        <li><a href="#day3">Day 3</a></li>
        <li><a href="#day4">Day 4</a></li>
    </ul>
    <div id="day1">first day content</div>
    <div id="day2">second day content</div>
    <div id="day3">third day content</div>
    <div id="day4">fourth day content</div>
</div>

Answer 2

<li><a href="#" class="dayLink" data-day="1">Day 1</a></li>
<li><a href="#" class="dayLink" data-day="2">Day 2</a></li>
<li><a href="#" class="dayLink" data-day="3">Day 3</a></li>
<li><a href="#" class="dayLink" data-day="4">Day 4</a></li>
<div class="day" data-day="1">first day content</div>
<div class="day" data-day="2">second day content</div>
<div class="day" data-day="3">third day content</div>
<div class="day" data-day="4">four day content</div>

<强> SCRIPT

$(function(){
    var $days = $('.day');

    $('.dayLink').on('click', function(){
        var $link = $(this);

        $days.hide();
        $days.filter(function(){
            return $(this).data('day') === $link.data('day');
        }).show();
    });
});

Answer 3

试试这个fiddle

我刚刚添加了几个类dayLink和dayContent，以便更轻松地选择它们。

$('form').submit(

    function() {
      //$('#days').empty();
      var inputNumber = $('#inputNumber').val(); 
      if (inputNumber>0) 
      {
        for (i=0; i < inputNumber; i++) 
        {
            $('<div id="day'+ i +'" class="dayContent">day ' + i + ' content</div>').appendTo('#days');
            $('<li><a class="dayLink" href="#day'+ i +'">Day '+ i +'</a></li>').appendTo('#days ul');

        }
        $('div[id^="day"]').not('#days').hide();
      }
      return false;
  });

  $('#days').on('click', "a.dayLink", function(e) {
    e.preventDefault();
    var hrefValue = $( this ).attr( "href" );
    console.log( hrefValue );
    $( ".dayContent" ).hide();
    $( hrefValue ).show();
  });

Answer 4

对于第一部分，您希望在页面加载时隐藏所有链接。然后设置一个事件监听器 - input或click个事件;要不是很好。使用:lt()伪选择器选择所需的链接并显示。

第二部分。页面加载时隐藏div。然后读取href属性的值以确定要显示的属性。

$(function() {
    //Cache DOM searches so the searches do not have to be done at every event
    //Improrves overal speed of app
    var divs = $('#days > div[id]'); //or $('#days > .day');
    var links = $('#days li');
    divs.hide();
    $('#days li > a').on('click', function( e ) {
        e.preventDefault();
        divs.hide();
        var clickedID = $(this).attr('href');
        $( clickedID ).show();
    });
  

    $('#number').on('input', function() {
        var val = +this.value;
        if( val < this.min || val > this.max ) {
            this.value = '';
            return false;
        }
        links.hide();
        links.filter(':lt(' + (+this.value) + ')').show();
        divs.hide();
    })
    .trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" name="number" id="number" min="1" max="4"  />
<div id="days">
   <ul>
    <li><a href="#day1">Day 1</a></li>
    <li><a href="#day2">Day 2</a></li>
    <li><a href="#day3">Day 3</a></li>
    <li><a href="#day4">Day 4</a></li>
   </ul>
    <div id="day1" class="day">first day content</div>
    <div id="day2" class="day">second day content</div>
    <div id="day3" class="day">third day content</div>
    <div id="day4" class="day">fourth day content</div>
</div>

Answer 5

我认为你最终想要的是以下内容。我试着在今晚晚些时候对这里发生的一切事情做出完整的解释。

＆＃13;

＆＃13;

// method to add/remove days to output area
function showDays(e) {
	var iMax = parseInt($('#inpDays').val());
    for (i=0;i<4;i++) {
        if (i < iMax) {
            if (!$('#daysOut li').eq(i).length) $('#days-placeholders li').eq(i).clone().appendTo('#daysOut ul');
        }
        else $('#daysOut li').eq(i).remove();
    }
}
$(function() {  //  <-- same as $(document).ready
    //  these first 2 lines simply assign our show/remove days method to change event on input and click event on button
	$('#daysIn').on('change', 'input[type=number]', showDays);
	$('#daysIn').on('click', 'input[type=button]', showDays);
    //  the following adds click event to "dynamically" created content
    $('#daysOut').on('click', 'li a', function(e) {
    	$(this).closest('li').addClass('selected').siblings('.selected').removeClass('selected').find('div').slideUp();
    	$(this).next('div').slideDown();
    })
})

＆＃13;

#days-placeholders, .day .content { display: none; }

#daysOut { padding: 1em; }
#daysOut ul { margin: 0; padding: 0; }
#daysOut li { list-style: none; }
#daysOut li a { color: red; text-decoration: none; }
#daysOut li.selected a { color: blue; text-decoration: underline; }
#daysOut li div { max-width: 8em; padding: .25em .5em; text-align: center; }
#daysOut li.selected div { background: #00F7F7; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="days-placeholders">
    <ul>
        <li class="day day-1">
            <a href="javascript:void(0)" class="btn">Day 1</a>
            <div class="content">first day content</div>
        </li>
        <li class="day day-2">
            <a href="javascript:void(0)" class="btn">Day 2</a>
            <div class="content">second day content</div>
        </li>
        <li class="day day-3">
            <a href="javascript:void(0)" class="btn">Day 3</a>
            <div class="content">third day content</div>
        </li>
        <li class="day day-4">
            <a href="javascript:void(0)" class="btn">Day 4</a>
            <div class="content">fourth day content</div>
        </li>
    </ul>
</div>
<div id="daysIn">
    <label for="inpDays">Number of days:</label>
    <input id="inpDays" name="inpDays" type="number" step="1" min="0" max="4" />
    <input id="btnSubmit" type="button" value="Enter" />
</div>
<div id="daysOut">
    <ul></ul>
</div>

＆＃13;

＆＃13;

＆＃13;