Le bloc-notes professionnel d'un développeur front-end senior
|
1 2 3 4 5 6 7 |
$('.element').attr({ id: getFacetID, "data-toggle": 'dropdown', role: 'button', "aria-haspopup": 'true', "aria-expanded": 'false' }); |
A noter : les attributs qui contiennent des tirets (caractère « -« ) doivent être mis entre guillemets.
Source : getting error adding multiple attributes using .attr()
Lorsque le nom de l’attribut contient des caractères –, il faut utiliser des guillemets.
|
1 |
jQuery('.myElement').attr({"aria-controls": getBrotherID, "aria-expanded": "false", "href": "#" +getBrotherID, "data-toggle": "collapse", "role": "button"}); |
A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery(document).ready(function(){ // http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/ jQuery('.radio-boxes-group').on('click', '.radio-box', function(){ var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name'); jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked'); jQuery(this).find('input:radio')[0].checked = true; if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!-- 1er groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="six columns payment-mode"> <div class="radio-box is-checked"> <input type="radio" id="monthly_payment" name="payment_mode" value="" checked="checked" /> <div class="information"> <label for="monthly_payment">Par mois</label> <p class="complementary-information">15€/mois</p> </div> </div> </div> <div class="six columns payment-mode"> <div class="radio-box"> <input type="radio" id="yearly_payment" name="payment_mode" value="" /> <div class="information"> <label for="yearly_payment">En une fois</label> <p class="complementary-information">180€ pour 1 an</p> </div> </div> </div> </div> </div> <!-- 2ème groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box is-checked"> <input type="radio" id="cb_method" name="payment_method" value="" checked="checked" /> <div class="information"> <label for="cb_method">Prélèvement CB</label> <p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="cheque_method" name="payment_method" value="" /> <div class="information"> <label for="cheque_method">Par chèque</label> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="sepa_method" name="payment_method" value="" /> <div class="information"> <label for="sepa_method">Prélèvement SEPA (RIB)</label> </div> </div> </div> </div> </div> |
onclick="" placé sur le booléen|
1 2 3 |
<div class="radio-box"> <input onclick="[...]" /> </div> |
Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box, compte pour un clic sur le champ radio ou checkbox dont il est le parent.
|
1 2 3 4 5 6 |
if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input. jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } |
|
1 |
<input class="input-to-button" type="submit" name="Envoyer" title="Envoyer" value="Envoyer" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(document).ready(function(){ // On commence par cacher l'<input type="submit" /> jQuery('input.input-to-button').hide(); // On stocke dans des variables les attributs de l'<input type="submit" /> var i2b_type = jQuery('input.input-to-button').attr('type'); var i2b_name = jQuery('input.input-to-button').attr('name'); var i2b_title = jQuery('input.input-to-button').attr('title'); var i2b_value = jQuery('input.input-to-button').attr('value'); // On crée le bouton <button /> et on lui ajoute les attributs de l'<input /> qu'on vient de cacher jQuery('input.input-to-button').after('<button class="button reset popin-reset" type="'+i2b_type+'" name="'+i2b_name+'" title="'+i2b_title+'">'+i2b_value+'</button>'); }); |
Simulation : http://jsfiddle.net/frontenddeveloper/7GV2G/51/
On commence par attribuer un id unique à chaque élément cible en incrémentant une valeur numérique :
|
1 2 3 4 5 |
var TARGET_ID = -1; jQuery('.target').each(function() { TARGET_ID++; jQuery(this).attr('id', 'target-'+TARGET_ID); }); |
Pour chaque élément qu’on souhaite déplacer, on récupère la valeur numérique contenue dans l’identifiant de manière à pouvoir le lier à l’élément cible correspondant :
|
1 2 3 4 |
jQuery('.content').each(function(i,n){ id = jQuery(n).attr("id").split('-')[1]; jQuery(n).appendTo('#target-' + id); }); |
Simulation : http://jsfiddle.net/frontenddeveloper/QG5qr/4/
|
1 2 3 4 5 6 |
jQuery(document).ready(function(){ jQuery('.box').click(function(){ window.location=jQuery(this).find("a").attr("href"); return false; }); }); |