تبديل جافا سكريبت

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

سؤال

أحاول الحصول على تأثير تبديل ولكن ليس متأكدا من كيفية القيام بذلك أو ما تبحث عنه. (أنا جاف جيس تحميل).

افترض 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's
  2. النقر فوق TD للحصول على تاريخ سيخفي كل ما، لكن Div مع فئة اليوم التي تم النقر عليها
  3. النقر على "جميع التواريخ" سيظهر كل شيء مرة أخرى

أي فكرة كيف يمكنني تحقيق هذا نظيفة؟ من الناحية المثالية باستخدام jQuery.

هل كانت مفيدة؟

المحلول

هنا مثال عمل مع جيس.

لاحظ أنه كان علي تغيير فصول الحف الخاصة بك و td التسميات لإزالة المسافة البيضاء بحيث تكون الملصقات تعادل أسماء الطبقة. إذا كنت لا تريد شرطات في الملصقات، فيمكنك القيام بمعالجة السلسلة في JavaScript لإزالة المساحة البيضاء أو إعطاء tdS نفس اسم Classame كما هو الحال المقابل ثم ننظر إلى Classname من النقر 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> نفس اسم الفصل التاريخ في 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