jQuery комментировать заявления? (продолжение)

Question

Спасибо за помощь в моем предыдущем посте @AndyE, ваше решение отлично работает.

теперь для моей последующей деятельности, та же идея, различные функции (s) ... я пытался реализовать предыдущее решение, но не мог заставить его работать правильно ...:

$(document).keypress(function(e) { 
    if (e.which == 27) { 
    $('#timeline-2010-1').hide(); 
    $('#timeline-2010-2').hide(); 
    $('#timeline-2010-3').hide(); 
    $('#timeline-2010-4').hide(); 
    $('#timeline-2010-5').hide(); 
    $('#timeline-2010-6').hide(); 
    $('#timeline-2010-7').hide(); 
    $('#timeline-2010-8').hide(); 
    $('#timeline-2010-9').hide(); 
    $('#timeline-2010-10').hide(); 
    $('#timeline-2010-11').hide(); 
    $('#timeline-2010-12').hide(); 
    $('#timeline-2010-13').hide(); 
    $('#timeline-2010-14').hide(); 
    $('#timeline-2010-15').hide(); 
    $('#timeline-2010-16').hide(); 
    $('#timeline-2010-17').hide(); 

    } 
}); 


$('a.close').click(function() { 
    $('#timeline-2010-1').hide(); 
    $('#timeline-2010-2').hide(); 
    $('#timeline-2010-3').hide(); 
    $('#timeline-2010-4').hide(); 
    $('#timeline-2010-5').hide(); 
    $('#timeline-2010-6').hide(); 
    $('#timeline-2010-7').hide(); 
    $('#timeline-2010-8').hide(); 
    $('#timeline-2010-9').hide(); 
    $('#timeline-2010-10').hide(); 
    $('#timeline-2010-11').hide(); 
    $('#timeline-2010-12').hide(); 
    $('#timeline-2010-13').hide(); 
    $('#timeline-2010-14').hide(); 
    $('#timeline-2010-15').hide(); 
    $('#timeline-2010-16').hide(); 
    $('#timeline-2010-17').hide(); 
    return false; 
    }); 


}); 

Answer 1

Я дал бы те элементы класса, например:

<div id="#timeline-2010-1" class="timelineNode">Stuff</div> 

Тогда вы можете стройный его вниз:

$(function() { 
    $(document).keypress(function(e) { 
    if (e.which == 27) { 
     $('.timelineNode').hide(); 
    } 
    }); 
    $('a.close').click(function() { 
    $('.timelineNode').hide(); 
    return false; 
    }); 
}); 

Answer 2

Попробуйте использовать "[attr^='val']" селекторный шаблон (фактически начинается с).

$('a.close').click(function() { 
    $("[id^='timeline-2010-']").hide(); 
    return false; 
    }); 

Answer 3

$(function() { 
    $(document).keypress(function(e) { 
     $('[id^=timeline-]').hide(); 
    }); 

    $('a.close').click(function() { 
     $('[id^=timeline-]').hide(); 
     return false; 
    }); 
}); 

или просто дать те элементы общего класса и используйте селектор классов.

Answer 4

Если вы желаете, чтобы закрыть все открытые элементы на побег или тесной связи, попробуйте следующее:

<script> 
$(document).ready(function() 
{ 
    $("a.timeline-2010").click(function() 
    { 
     $(this).parent().children("div.timeline-2010").show(); 
     return false; 
    }); 
    $(document).keypress(function(e) 
    { 
     // firefox and IE for escape key 
     if (e.which == 27 || e.which == 0) 
     { 
      // hide all of the divs 
      $('div.timeline-2010').hide(); 
     } 
    }); 
    $('a.close').click(function() 
    { 
     $('div.timeline-2010').hide(); 
     return false; 
    }); 
}); 
</script> 

Мой HTML ниже:

<div> 
    <a class="timeline-2010" href="#">blah</a> 
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a> 
     Stuff that is hidden to be shown 
    </div> 
</div> 
<div> 
    <a class="timeline-2010" href="#">blah</a> 
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a> 
     Stuff that is hidden to be shown 
    </div> 
</div> 
<div> 
    <a class="timeline-2010" href="#">blah</a> 
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a> 
     Stuff that is hidden to be shown 
    </div> 
</div>