Комбинация Coutdown Date & List Button Filter Javascript

Question

Мне нужен герой. Я объединил два куска чистого кода JS-кода & обратный отсчет - чтобы сформировать то, что можно увидеть в полном объеме Fiddle. Тем не менее, я хорошо и по-настоящему потрясен тем, что нужно изменить, чтобы заставить себя вести себя, чтобы соответствовать моим желаемым критериям ниже (это будет связано с тем, что мои знания по этому вопросу очень ограничены, более того, что он просто может " t быть сделано!)

1) Вместо окна поиска и кнопок сортировки есть кнопки, которые при нажатии активируют предварительно установленный фильтр. Например, если предположить 4 кнопки, 3 из них будут «Земля» «Марс» и «Сатурн». Используя пример из Fiddle, когда нажата кнопка «Земля», это вернет два результата с «Землей» в них: «Земля умирает в: 157Days, 7Hours» и «Земля умирает в: 126Days, 6Hours». Кнопки «Сатурн» и «Марс» будут вести себя так же, как возвращение «Сатурн умирает в: Уже вымерший!» и «Марс умирает: Уже вымер!» соответственно.

2) Имейте четвертую кнопку, которая вместо фильтрации для этого термина исключает этот термин. Эта кнопка, например, может называться «Not Extinct», которая исключает тех, у кого есть слово «вымерший» в пределах «enddate». Здесь я не испытывал радости, так как даже в этом текущем состоянии содержимое, содержащееся в пределах диапазона enddate, не находит фильтра. Я знаю, если бы у меня не было обратного отсчета, это сработало бы, но это жизненно важно.

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, но вы можете использовать все, что хотите. В качестве эталона я создал jsfiddle с флажками здесь http://jsfiddle.net/vfaller/haotj66y/

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

<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>