Javascript Girl
  1. Javascript Girl
  3. Comment puis-je le faire à une échelle plus grande?
Intereting Posts
L'audio ne fonctionne pas dans l'iPad Le module Misspack du module Webpack n'a pas été trouvé Utilisation de D3.js avec un objet javascript au lieu d'un fichier JSON externe Comment appeler une fonction JS à l'aide de l'événement OnClick JQuery Mobile navigate – Pourquoi l'état est-il vide? Javascript: TypeError: … n'est pas un constructeur Javascript Regex – Que faut-il utiliser pour valider un numéro de téléphone? Fonctions de flèche – pourquoi cela empêche-t-il l'objet global de la console? Pourquoi * not * "inherit" / extension de Object in JavaScript? Accès refusé au script jQuery sur IE Est-ce que NaN est fausse? Pourquoi NaN === false renvoie faux Forcer le navigateur à télécharger Image avec Javascript window.open? Erreur Webpack – Impossible de résoudre le fichier ou l'annuaire Dépendances circulaires pour une application Web utilisant backbone.marionette et requireJs Pourquoi le nom 'let' a-t-il été choisi pour les déclarations variables à bloc-scoped en JavaScript?

Comment puis-je le faire à une échelle plus grande?

J'ai un code pour un quiz de personnalité, mais je ne suis pas sûr de savoir comment je peux augmenter la taille de ce code sans le faire glisser. Voici le code HTML: 

<h3>1. How old are you?</h3> <input type="radio" mess="whats up" name="q1" value="A" class="correct"/> A. 1-50. <input type="radio" mess="You did it" name="q1" value="B" class="correct"/> B. 50-100. <input class="button" type="submit" value="Submit" /> <input type="reset" value="Clear" /> <p class="answer"></p>

Et voici le code JavaScript: 

 var checked; $('.button').click(function(){ checked = $('input:checked').attr('mess'); $('.answer p').remove(); $('.answer').append("<p>"+checked+"</p>"); }); $('input[value="Clear"]').click(function(){ $('.answer p').remove(); });

Je veux faire ce genre de chose, mais pour un quiz avec peut-être cinq questions et toutes les questions que l'utilisateur répond se transforme en une grande réponse finale pour eux et la réponse est différente selon les boutons radio qu'ils choisissent. Donc, est-ce que je peux faire cela, mais sans répéter le code pour chaque bouton radio?

Comme indiqué dans les commentaires, utilisez des data-* des attributs personnalisés au lieu de vos propres attributs conjointement avec this dans votre jQuery pour rendre votre code réutilisable. Je recommanderais également de contenir chaque question dans son propre élément comme une div. Wrapping. 

 $('.button').click(function () { var checked = $(this).parent().find('input:checked').data('mess'); $(this).parent().find('.answer p').remove(); $(this).parent().find('.answer').append("<p>" + checked + "</p>"); }); $('input[value="Clear"]').click(function () { $(this).parent().find('.answer p').remove(); });

JsFiddle exemple

J'ai fait une fonction pour vous parce que ça a l'air amusant: D

Voici un jsFiddle de travail

Et le code: 

 // Add as many questions as you like! addRadioQuestion("How old are you?", ["1-50","50-100"]); // Question is a string and options is an array of strings function addRadioQuestion (question, options) { if ($.isArray(options) && typeof question === "string") { // Get the number of previous questions var qNum = $('.question').length + 1; // Create a containing div var questionDiv = $('<div/>').addClass('question'); // Add title to questionDiv questionDiv.append($('<h3/>').text(qNum + ". " + question)); // Add a radio button for each option for (var i = 0; i < options.length; i++) { // Converting from numbers to lettters using ASCII var optionVal = String.fromCharCode(65 + i); var option = $('<input/>') .attr('type', 'radio') .attr('data-message', options[i]) .attr('name','q' + qNum) .attr('value', optionVal) .addClass('correct') var optionText = $('<label/>') .text(optionVal + '. ' + options[i]) .append(option); questionDiv.append(optionText); } // Append Submit Button questionDiv.append($('<input/>') .addClass('button') .attr('type', 'submit') .attr('value', 'Submit') .on('click', function() { var theirAnswer = $(this).closest('.question').find('input:checked').attr('data-message'); console.log($(this).closest('.question').find('input:checked').attr('data-message')) $(this).siblings('.answer').text(theirAnswer); })); // Append Clear Button questionDiv.append($('<input/>') .addClass('button') .attr('type', 'reset') .attr('value', 'Clear') .on('click', function() { $(this).closest('.question').find('input:checked').prop('checked', false); $(this).siblings('.answer').text(""); })); // Append answer paragraph questionDiv.append($('<p/>').addClass('answer')); questionDiv.appendTo('body'); } }

Il a l'air assez basique sans CSS, mais vous pouvez le rendre très beau si vous voulez!