Переключение Javascript

StackOverflow https://stackoverflow.com/questions/1844426

Вопрос

Я пытаюсь получить эффект переключения, но не совсем уверен, как это сделать или на что обратить внимание.(у меня загружен 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>

Шаги, которые необходимо предпринять

  1. Показаны все div
  2. Нажатие на td для даты скроет все, кроме div с классом выбранного дня
  3. нажав "Все даты", вы снова все увидите

есть какие-нибудь идеи, как я мог бы добиться этого чисто?в идеале с использованием jQuery.

Это было полезно?

Решение

Вот рабочий пример с jQuery.

Обратите внимание, что мне пришлось изменить ваши классы div и td метки для удаления пробелов, чтобы метки были эквивалентны именам классов.Если вам не нужны тире в метках, вы могли бы выполнить манипулирование строками в Javascript, чтобы удалить пробелы или предоставить tds то же имя класса, что и их соответствующий 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();
         }
      });
   });
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top