문제

나는 토글 효과를 얻으려고 노력하고 있지만 어떻게 해야할지 또는 무엇을 찾아야하는지 잘 모르겠습니다. (나는 Jave 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 레이블이 클래스 이름과 동일하도록 whitespace를 제거하는 레이블. 레이블에서 대시를 원하지 않으면 흰색 공간을 제거하거나 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() 바인딩하는 대신 a click() 각각의 이벤트 td

또한 게시 한 HTML에는 오류가 있습니다. 그만큼 03 Div는 이전에 하이픈을 놓치고 있습니다 2009

당신을 식별하십시오 <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();
         }
      });
   });
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top