Question

我需要一个英雄。我结合了两个纯JS代码 - 列表过滤器＆amp;倒计时 - 形成可以完全看到小提琴的东西。然而，我很好并且真正难以理解为什么需要进行调整以使其符合下面我期望的标准（这将是因为我对此事的知识非常有限，而不仅仅是它可以'完成！）

1）按下按钮，而不是搜索框和排序按钮，按下时激活预设过滤器。例如，如果我们假设4个按钮，其中3个将是“地球”“火星”和“土星”。使用小提琴的例子，当点击“地球”按钮时，这将返回两个结果，其中包含“地球”，“地球死亡：157天，7小时”和“地球死亡：126天，6小时”。 “土星”和“火星”按钮的行为方式与返回“土星死亡：已经灭绝！”相同。并且“火星死了：已经灭绝了！”分别

2）有第四个按钮，而不是对该术语进行过滤，不包括该术语。例如，这个按钮可以被称为“不灭绝”，它将在“enddate”范围内排除那些带有“灭绝”字样的按钮。这就是我没有喜悦的地方，即使在过滤器没有找到enddate span中包含的当前状态内容。我知道如果我没有倒计时它会起作用，但这仍然至关重要。

3）能够同时按下/激活多个按钮的任意组合。例如，如果您想同时按下“地球”和“不灭绝”（或任何组合）。

对于任何读过这篇文章的人都感谢你抽出时间，我试着尽可能地清楚，这意味着它很啰嗦，所以你已经做得很好。如果你有一个解决方案，我会登上月球（保持空间主题），因为我真的需要帮助！如果有任何不清楚的地方，请告诉我，我会尽力详细说明。

JSFiddle

<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">Sort by name</button>
<button class="sort" data-sort="enddate">Sort by year</button>
<ul class="list">
<li>
<div>
<span class="name">Earth</span>dies in: <span class="enddate" data-countdown="November 20, 2015"></span>
</div>
</li>

<li>
<div>
<span class="name">Mars</span> 
dies in: <span class="enddate" data-countdown="January 20, 2015"></span>
</div>
</li>

<li>
<div>
<span class="name">Saturn</span> dies in: <span class="enddate" data-countdown="May 25, 2015"></span>
</div>
</li>

<li>
<div>
 <span class="name">Earth</span> 
dies in: <span class="enddate" data-countdown="October 20, 2015"></span>
</div>
C</li>


Earth dies in: 157Days, 7Hours
Mars dies in: Already Extinct!
Saturn dies in: Already Extinct!
Earth dies in: 126Days, 6Hours

Answer 1

我使用JQuery重新创建了代码。我尽力坚持你所拥有的相同结构，但我将按钮更改为复选框只是因为当选择多个过滤器时，它会使用户体验更好。这是我的例子

<强> EDITED

我更新了示例以使用按钮。我为按钮的CSS添加了bootstrap，但你可以使用你想要的任何css。作为参考，我在这里创建了一个带有复选框的jsfiddle http://jsfiddle.net/vfaller/haotj66y/

＆＃13;

$(document).ready(function() {
  updatePlanetLifespan();
});

setInterval(function() {
  updatePlanetLifespan();
}, 1000);

function updatePlanetLifespan() {
  $('.enddate').each(function() {
    var cd = new Date();
    var current_date = cd.getTime();
    var dt = $(this).attr('data-countdown');
    var seconds_left = (new Date(dt + " 23:59").getTime() - current_date) / 1000;
    days = parseInt(seconds_left / 86400, 10);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600, 10);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60, 10);
    seconds = parseInt(seconds_left % 60, 10);
    if (seconds < -0) $(this).text('Already Extinct!');
    else if (hours < -0) $(this).text('Already Extinct!');
    else if (days < -0) $(this).text('Already Extinct!');
    else if (days < 1) $(this).text('Final day of Existence!');
    else if (days < 2) $(this).text('One More Day Until The End!');
    else $(this).text(days + ' Days, ' + hours + ' Hours ');
  });
}

var showEarth = false;
var showMars = false;
var showSaturn = false;
var dontShowExtinct = false;

function filterPlanet() {

  $('li').each(function(index) {
    $(this).show();
    var countdown = $(this).find('.enddate').text();

    if (countdown.indexOf('Extinct') > -1 && dontShowExtinct) {
      $(this).hide();
    }
  });

  if (showEarth || showMars || showSaturn) {
    $('li').each(function(index) {
      var name = $(this).find('.name').text();
      var countdown = $(this).find('.enddate').text();

      if ((name === 'Earth' && !showEarth) || (name === 'Mars' && !showMars) || (name === 'Saturn' && !showSaturn)) {
        $(this).hide();
      }
    });
  }
}

$('#btnEarth').click(function() {
  if (showEarth) {
    showEarth = false;
    $(this).removeClass('btn-warning');
  } else {
    showEarth = true;
    $(this).addClass('btn-warning');
  }
  filterPlanet();

});

$('#btnMars').click(function() {
  if (showMars) {
    showMars = false;
    $(this).removeClass('btn-warning');
  } else {
    showMars = true;
    $(this).addClass('btn-warning');
  }
  filterPlanet();
});

$('#btnSaturn').click(function() {
  if (showSaturn) {
    showSaturn = false;
    $(this).removeClass('btn-warning');
  } else {
    showSaturn = true;
    $(this).addClass('btn-warning');
  }
  filterPlanet();
});

$('#btnNotExtinct').click(function() {
  if (dontShowExtinct) {
    dontShowExtinct = false;
    $(this).removeClass('btn-warning');
  } else {
    dontShowExtinct = true;
    $(this).addClass('btn-warning');
  }
  filterPlanet();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div id="users">
  <button id="btnEarth" class="btn">Earth</button>
  <button id="btnMars" class="btn">Mars</button>
  <button id="btnSaturn" class="btn">Saturn</button>
  <button id="btnNotExtinct" class="btn">Not Extinct</button>
  <br/>
  <ul class="list">
    <li>
      <div> <span class="name">Earth</span> dies in: <span class="enddate" data-countdown="November 20, 2015"></span>

      </div>
    </li>
    <li>
      <div> <span class="name">Mars</span> dies in: <span class="enddate" data-countdown="January 20, 2015"></span>

      </div>
    </li>
    <li>
      <div> <span class="name">Saturn</span> dies in: <span class="enddate" data-countdown="May 25, 2015"></span>

      </div>
    </li>
    <li>
      <div> <span class="name">Earth</span> dies in: <span class="enddate" data-countdown="October 20, 2015"></span>

      </div>
    </li>
  </ul>

＆＃13;

组合Coutdown日期＆amp;列表按钮过滤Javascript

1 个答案: