Al pasar un parámetro a la función Javascript a través del selector CSS

Question

Así que, en resumen, que tienen un conjunto de .li

<ul> 
    <li class="lmit_1"><a href="#" >Home</a></li> 
    <li class="lmit_2"><a href="#">About us</a></li> 
    <li class="lmit_3"><a href="#">Who we are</a></li> 
    <li class="lmit_4"><a href="#">Whats new</a></li> 
    <li class="lmit_5"><a href="#">Contact Us</a></li>  
</ul> 

y mi Javascript (jQuery)

<script> 
    $(".lmit_" + id).click(function() { 
    alert(id); 
    }); 
</script> 

Lo que estoy tratando de hacer se recibe el número que se encuentre al final de la clase css como parámetro (.lmit_3 por ejemplo permitiría id = 3) y, por lo tanto, la alerta (id) debería conducir a una ventana emergente con el número 3? Soy nuevo en la programación y Javascript para que mis disculpas si la respuesta me está mirando a la cara ...

Answer 1

Demostración: http://jsfiddle.net/sFwZj/1/

$('li').click(function() { 
    alert($(this).attr('class').split('_')[1]); 
}); 

En su código que utilice variable no declarada llamada id, por lo que debe lanzar error ReferenceError: id is not defined, cuando intenta ".lmit_" + id.

y también creo que debe usar id no class para esto, también como se ha mencionado, probablemente será mejor si va a almacenar un número en algo así como data-id atributo, entonces es posible conseguirlo por $(this).data('id').

Answer 2

$("li").click(function() { 
  alert(this.className.split('_')[1]); 
}); 

debe hacerlo

Pero por qué no

    <ul> 
    <li class="lmit" id="lmit_1"><a href="#" >Home</a></li> 
    <li class="lmit" id="lmit_2><a href="#">About us</a></li> 

con

$(".lmit").click(function() { 
  alert(this.id.split('_')[1]); 
}) 

Answer 3

probar este

$('ul li').on('click', function(){ 
    alert($(this).prop('class').split('_')[1]); 
}); 

Answer 4

Probablemente sea mejor almacenar cualquier dato que desee usar en el atributo de datos. De esta forma, no depende demasiado de las clases y los identificadores (y del procesamiento de cadenas), sino que también tiene cierta separación entre el formato y la funcionalidad.

su HTML se verá así:

<ul> 
<li class="lmit" data-myattr="1"><a href="#" >Home</a></li> 
<li class="lmit" data-myattr="2"><a href="#">About us</a></li> 
</ul> 

nota que los datos myattr se puede llamar cualquier cosa con un prefijo "Data-".

a acceder a sus datos

 $(".lmit").click(function(){ 
//you can access it as an attribute 
     alert($(this).attr("data-myattr")); 
//or you can access it as data 
      alert($(this).data("myattr")); 
     }) 

o para el uso solución más sin clases delegación de eventos, incluso

$("ul").delegate("li", "click", function() { 
alert($(this).data("myattr")); 
}); 

por lo que no necesita la clase LMIT en absoluto en su html

<ul> 
<li data-myattr="1"><a href="#" >Home</a></li> 
<li data-myattr="2"><a href="#">About us</a></li> 
</ul> 

Answer 5

Las respuestas anteriores son todas correctas. Si desea obtener el número de artículo en el <ul>, tiene una alternativa.

$('li').click(function() { 
    alert($(this).index()+1); 
}); 

El beneficio es que usted no tendrá que generar los nombres de las clases (si eso es todo lo que se utilizan para)

Answer 6

$('[li][class^="lmit_"]').click(function() { 
    alert($(this).attr('class').split('_')[1]); 
}); 

si utiliza $ ('li') si u clic en cualquier li que no tenga la clase "limit_" también se disparará.