alternar elementos jquery

tengo un tres a etiquetas en una página. El usuario puede "seleccionar" solo uno. Margen:

<div class="fl_near">
  <span class="title">title</span>
  <p>
    <a id="filter_today" class="first_tb" style="display: block">
      <span>text1</span>
    </a>
    <a id="filter_tomorrow">
      <span>text2</span>
    </a>
    <a id="filter_afterTomorrow" class="last_tb selected" style="display: block">
      <span>text3</span>
    </a>
  </p>
</div>

Código JS:

$('.fl_near').find('a:not(.selected)').click(function () {
    alert('1');
        $('.fl_near').find('a').removeClass('selected');
        $(this).addClass('selected');
    });

Este código no funciona correctamente. Si selecciono la primera o la segunda etiqueta, todo está bien: el estilo cambia, pero la alerta se muestra de todos modos. Si selecciono primero, no puedo seleccionar el último.
¿Dónde hay un problema y por qué?
Gracias.

DEMO

preguntado el 31 de julio de 12 a las 09:07

3 Respuestas

Porque no vincula el controlador de clics al último elemento.

Trata

$('.fl_near a').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});​

Respondido 31 Jul 12, 09:07

oh, es mi descuido. Gracias - user1260827

Los programas find el filtro se ejecuta solo una vez; no escucha los clics sucesivos. Use la delegación de eventos para esto; de esa manera, el filtro se aplicará cuando se produzca el clic, no, como actualmente, cuando vincula el evento.

$('.fl_near').on('click', 'a:not(.selected)', function (evt) {
    alert(1);
    $(this).addClass('selected').siblings('a').removeClass('selected');
});

Tenga en cuenta que también he simplificado su línea de agregar/eliminar clase.

Respondido 31 Jul 12, 09:07

Tal como está ahora, no está vinculando el evento de clic al enlace que se selecciona desde el principio.

Me gustaría cambiar:

$('.fl_near').find('a:not(.selected)').click(function () {

a

$('.fl_near a').click(function () {

Respondido 31 Jul 12, 09:07

Te olvidas que el ultimo elemento tiene la clase selected, y encuentras los elementos que no tienen esa clase - javascript es futuro

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.