Passando un parametro di funzione javascript tramite selettore CSS

Question

Così, in breve, ho una serie di .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> 

e il mio javascript (jQuery)

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

Quello che sto cercando di fare viene ricevuto qualunque numero sia alla fine della classe css come parametro (.lmit_3 per esempio consentirebbe id = 3) e quindi alert (id) dovrebbe portare a un popup con il numero 3? Sono nuovo di programmazione sia e javascript quindi le mie scuse se la risposta mi sta fissando in faccia ...

Answer 1

Demo: http://jsfiddle.net/sFwZj/1/

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

Nel codice si utilizza variabile non dichiarata chiamato id, quindi dovrebbe lanciare l'errore ReferenceError: id is not defined, quando si prova ".lmit_" + id.

e anche io che si dovrebbe usare id non class per questo, anche come è stato detto, probabilmente sarà meglio se si vuole memorizzare il numero in qualcosa come attributo data-id, allora si può ottenere da $(this).data('id').

Answer 2

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

dovrebbe farlo

Ma perché non

    <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

provare questo

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

Answer 4

Probabilmente è meglio memorizzare tutti i dati che si desidera utilizzare nell'attributo dei dati. In questo modo non stai facendo affidamento su classi e ID troppo pesantemente (e sull'elaborazione delle stringhe) e hai una certa separazione tra la formattazione e la funzionalità.

il codice HTML sarà simile a questa:

<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 che i dati-myattr può essere chiamato qualsiasi cosa con un prefisso "data-".

per accedere ai dati

 $(".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 anche più senza classi soluzione Uso delegazione evento

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

quindi non c'è bisogno di classe LMIT a tutti nel tuo html

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

Answer 5

Le risposte sopra sono tutte corrette. Se si desidera prendere il numero dell'articolo nel <ul>, si dispone di un'alternativa.

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

Il vantaggio è che non sarà necessario generare i nomi di classe (se questo è tutto quello che sono usati per)

Answer 6

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

se si utilizza $ ('Li') se u fare clic su qualsiasi li non ha la classe "limit_" anche verrà licenziato.