Question

我有下面的代码，当用户点击月份时，只显示特定月份的内容，当用户点击年份时，会显示该年度的所有月份内容，但我遇到了问题让它发挥作用。

HTML

<div>
  <ul>
    <li class="year15">2015
      <ul>
        <li class="jan15">JAN</li>
        <li class="feb15">FEB</li>
      </ul>
    </li>
    <li class="year14">2014
      <ul>
        <li class="jan14">JAN</li>
        <li class="feb14">FEB</li>
      </ul>
    </li>
  </ul>
</div>

<div class="months">

  <div class="year15">
    <div class="jan15">
      <p>january 2015</p>
    </div>
    <div class="feb15">
      <p>february 2015</p>
    </div>
  </div>

  <div class="year14">
    <div class="jan14">
      <p>january 2014</p>
    </div>
    <div class="feb14">
      <p>february 2014</p>
    </div>
  </div>

</div>

jQuery - 这使得当年的所有月份内容都显示

$('ul > li').click(function() {
  var className = $(this).attr('class');

  $('.months > div').hide();

  if ($('.' + className).length > 0) {
    $('.' + className).show();
  }
});

jQuery - 这使个别月内容显示

$('ul li ul li').click(function() {
  var className = $(this).attr('class');

  $('.months > div').children().hide();

  if ($('.' + className).length > 0) {
    $('.' + className).show();
  }
});

如果我将2个代码放在一起，点击年份，那么月份工作正常，但是当点击年份，或点击年份之前的几个月时，年份代码表格正常工作。

我设法使用下面的方法使其工作，但如果我多年来添加代码将会非常漫长。

if ($(this).hasClass('year14')) {
    $('.months .year14').children().show();
  } else if ($(this).hasClass('year15')) {
    $('.months .year15').children().show();

有没有解决方法，或者我的最终jQuery代码是唯一的方法？

https://jsfiddle.net/fk7snLct/

Answer 1

这应该有效：

$('li[class*="year"]').click(function(e) {
    var className = $(this).attr('class').split(' ').pop();
    $('div[class*="year"] div').show();
    $('div[class*="year"]').hide();
    $('div.'+className).show();
  console.log(className);
});
$('li[class*="year"] > ul > li').click(function(e) {
    e.stopPropagation();
    var className = $(this).attr('class').split(' ').pop();
    $('div[class*="year"] div').hide();
    $('div[class*="year"]').hide();
    $('div.'+className).parent().show();
    $('div.'+className).show();
  console.log(className);
});

请参阅小提琴：https://jsfiddle.net/72dvf3b8/

Answer 2

I like this aprouch, I think is readable.

Javascript:

$('li').on('click',function(event){

  if (event.target !== this)
    return;

   var data = $(this).data();
   var $months = $('.months');
   var $year = $months.find('[data-year="'+data.year+'"]');

   $months.find('.year, .month').hide();

   switch(data.type){
    case 'year':
        $year.show().find('.month').show();
        break;
    case 'month':
        $year.show().find('[data-month="'+data.month+'"]').show();
        break;
   }


});

HTML:

<div>
  <ul>
    <li class="year" data-type='year' data-year='2015'>
      2015
      <ul>
        <li class="month" data-type='month' data-year='2015' data-month='jan'>JAN</li>
        <li class="month" data-type='month' data-year='2015' data-month='feb'>FEB</li>
      </ul>
    </li>
    <li class="year" data-type='year' data-year='2014'>2014
      <ul>
        <li class="month" data-type='month' data-year='2014' data-month='jan'>JAN</li>
        <li class="month" data-type='month' data-year='2014' data-month='feb'>FEB</li>
      </ul>
    </li>
  </ul>
</div>

<div class="months">

  <div class="year" data-year="2015">
    <div class="month" data-month='jan'>
      <p>january 2015</p>
    </div>
    <div class="month" data-month='feb'>
      <p>february 2015</p>
    </div>
  </div>

  <div class="year" data-year="2014">
    <div class="month" data-month='jan'>
      <p>january 2014</p>
    </div>
    <div class="month" data-month='feb'>
      <p>february 2014</p>
    </div>
  </div>

</div>

https://jsfiddle.net/fk7snLct/1/

jQuery发现className不适用于第二次单击功能

2 个答案: