Переключение Javascript
-
12-09-2019 - |
Вопрос
Я пытаюсь получить эффект переключения, но не совсем уверен, как это сделать или на что обратить внимание.(у меня загружен Jquery).
предположим, html похож на
<table class="left-dates">
<tr><td>All Dates</td></tr>
<tr><td>01 dec 2009</td></tr>
<tr><td>02 dec 2009</td></tr>
<tr><td>03 dec 2009</td></tr>
<tr><td>04 dec 2009</td></tr>
</table>
<div class="box 01-dec-2009">
foo
</div>
<div class="box 03-dec 2009">
bar
</div>
<div class="box 04-dec-2009">
foobar
</div>
Шаги, которые необходимо предпринять
- Показаны все div
- Нажатие на td для даты скроет все, кроме div с классом выбранного дня
- нажав "Все даты", вы снова все увидите
есть какие-нибудь идеи, как я мог бы добиться этого чисто?в идеале с использованием jQuery.
Решение
Вот рабочий пример с jQuery.
Обратите внимание, что мне пришлось изменить ваши классы div и td
метки для удаления пробелов, чтобы метки были эквивалентны именам классов.Если вам не нужны тире в метках, вы могли бы выполнить манипулирование строками в Javascript, чтобы удалить пробелы или предоставить td
s то же имя класса, что и их соответствующий div, а затем посмотрите на имя класса выбранного td
а не его внутренний текст.
<html>
<head>
<title>jQuery hiding example</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('td').click(function() {
var target = $(this).text();
if (target == 'All Dates') {
$('div.box').show();
} else {
$('div.box').hide();
$('div.' + target).show();
}
});
});
</script>
</head>
<body>
<table class="left-dates">
<tr><td>All Dates</td></tr>
<tr><td>01-dec-2009</td></tr>
<tr><td>02-dec-2009</td></tr>
<tr><td>03-dec-2009</td></tr>
<tr><td>04-dec-2009</td></tr>
</table>
<div class="box 01-dec-2009">
foo
</div>
<div class="box 03-dec-2009">
bar
</div>
<div class="box 04-dec-2009">
foobar
</div>
</body>
</html>
Другие советы
Я бы попробовал это таким образом:
var $boxes = $('div.box');
$('.left-dates td:gt(0)').click(function(e){
var class = this.innerHTML.replace(/ /g, '-'); // Convert text to class
$boxes.filter(':visible').not('.' + class).hide(); // All visible div.box that don't have the class we are going to show.
$boxes.filter('.' + class).show(); // Show this class
});
$('.left-dates td:first').click(function(e){
$boxes.show();
});
Редактировать: Я поменялся местами .click()
в течение .live('click')
.Если бы там собиралось быть множество строк, возможно, было бы лучше использовать .live()
вместо того, чтобы связывать click()
событие для каждого td
Кроме того, опубликованный вами HTML-код содержит ошибку.В 03
в div отсутствует дефис перед 2009
Определите свой <td>All Dates</td>
уникально.Присвойте один и тот же класс или какой-либо другой идентификатор всем вашим датам <td>s
.Дайте им обработчик кликов, который скрывает все элементы .box, кроме того, у которого та же дата.В вашем примере вы не согласны с назначением даты в <td>
то же самое, что и название класса date в ваших divs, которое вам понадобится для того, что я сделаю.
<table class="left-dates">
<tr><td id="alldates">All Dates</td></tr>
<tr><td id="date">01 dec 2009</td></tr>
<tr><td id="date">02 dec 2009</td></tr>
<tr><td id="date">03 dec 2009</td></tr>
<tr><td id="date">04 dec 2009</td></tr>
</table>
// unhide all box elements
$("#alldates").click(function(e){ $(".box").show(); });
// For each date <td> element
$("#date").each(function(){
// assign a click event
$(this).click(function(e){
// when the user clicks, get the
// <td>'s text contents
var myval = $(this).text();
// and grab each element with the
// 'box' css class
$(".box").each(function(){
// for each of these 'box' elements,
// if it has a class matching the date
// they selected, return
if($(this).has(myval))
{
return;
}
else
{
// otherwise, hide itself
$(this).hide();
}
});
});
});