Javascript切換

我試圖得到一個切換效果，但不太清楚如何去做或尋找什麼。（我jave jquery加載）。Javascript切換

承擔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的顯示
點擊的日期會隱藏所有，但與類的DIV一個TD拿點擊一天
點擊「所有日期」將再次顯示所有內容

任何想法如何我可以實現這個乾淨？理想情況下使用JQuery。

來源

2009-12-04 Shadi Almosri

以下是jQuery的一個工作示例。

請注意，我必須更改您的div類和td標籤以刪除空格，以便標籤將等同於類名稱。如果您不想在標籤中使用破折號，則可以在Javascript中執行字符串操作來刪除空白區域，或者爲td指定與其對應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>

來源

2009-12-04 02:15:11

更新：爲「所有日期」添加了案例。 – 2009-12-04 02:26:43

快速和乾淨，我實現了這個黑客版本，但你給我所有我需要的信息，謝謝。接受:) – 2009-12-04 02:43:51

我會嘗試這種方式：

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

編輯：我在.live('click')交換.click()。如果將出現大量行，則最好使用.live()而不是將click()事件綁定到每個td

此外，您發佈的HTML有錯誤。 03 div在缺少連字符之前2009

來源

2009-12-04 02:04:39

剛剛發佈了一個小的修復程序到我的代碼。替換功能只能找到第一個空間，而不是所有的空間。 – 2009-12-04 02:08:45

現場選擇器的開銷很大。它會在每個文檔點擊事件中運行。最好保留任何直播活動給簡單的選擇器，否則使用本地事件委託 – redsquare 2009-12-04 02:21:57

我認爲這樣，直到我參加了在波士頓的#jqcon，並被核心團隊mebers否則告知。「活着」比爲每個事件綁定一個單獨的點擊方法令人驚訝地更快，更精簡。 – 2009-12-04 02:36:29

確定您的<td>All Dates</td>是唯一的。爲您的日期分配相同的班級或其他標識符<td>s。爲他們提供一個點擊處理程序，隱藏除了具有相同日期的元素之外的所有.box元素。在你的例子中，你將<td>中的日期與你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(); 
     } 
     }); 
    }); 
});

來源

2009-12-04 02:18:55

回答

相關問題