Haga clic en Manipuladores que muestren el estado de un envío -- javascript campo con dom camp codereview Relacionados El problema

Click handlers that display the status of a submission


2
vote

problema

Español

Han pasado años desde que he tocado a JavaScript y el extraño alcance me exceden cada vez. Por favor, ¿podría apuntarme en la dirección correcta de cómo hacerlo en ordenar y evitar la duplicación?

Es simplemente dos eventos de clic, con la única diferencia que se actualiza en el éxito.

  $(function () {      $(".manualSubmitComplete")         .click(function () {              $(".spinner").show();              var $this = $(this);              $.get(this.href)                 .done(function () {                      var $parent = $this.parent();                      $parent.children("spinner").show();                      $parent.children("a").remove();                     $parent.children("span").remove();                     $parent.attr("class", "");                     $parent.css("background-color", "#B0FFB0");                      $(".spinner").hide();                 });              return false;          });       $(".manualSubmitReject")             .click(function () {                  $(".spinner").show();                  var $this = $(this);                  $.get(this.href)                     .done(function () {                          var $parent = $this.parent();                          $parent.children("spinner").show();                          $parent.children("a").remove();                         $parent.children("span").remove();                         $parent.attr("class", "");                         $parent.css("background-color", "#FF0000");                          $(".spinner").hide();                     });                  return false;              });  })   
Original en ingles

It's been years since I've touched javascript and the strange scoping trips me up each time. Please could you point me into the right direction of how to both tidy this up and prevent the duplication?

It is simply two click events, with the only difference being the color updated on success.

$(function () {      $(".manualSubmitComplete")         .click(function () {              $(".spinner").show();              var $this = $(this);              $.get(this.href)                 .done(function () {                      var $parent = $this.parent();                      $parent.children("spinner").show();                      $parent.children("a").remove();                     $parent.children("span").remove();                     $parent.attr("class", "");                     $parent.css("background-color", "#B0FFB0");                      $(".spinner").hide();                 });              return false;          });       $(".manualSubmitReject")             .click(function () {                  $(".spinner").show();                  var $this = $(this);                  $.get(this.href)                     .done(function () {                          var $parent = $this.parent();                          $parent.children("spinner").show();                          $parent.children("a").remove();                         $parent.children("span").remove();                         $parent.attr("class", "");                         $parent.css("background-color", "#FF0000");                          $(".spinner").hide();                     });                  return false;              });  }) 
     
 
 

Lista de respuestas

3
 
vote

Simplemente puede extraer el código común en una función. Podría posiblemente pasar this en lugar de href y put3D9 y derive ref y destino en la función o pase 99887776655443310 Más bien que putB1 , pero los argumentos actuales parecen ligeramente más claros.

  putB2  
 

You can simply extract the common code into a function. Arguably you could pass this rather than href and $target and derive ref and target in the function or pass $parent rather than $target, but the current arguments seem slightly clearer.

$(function() {      var fetchUrl = function (href, $target, color) {       $(".spinner").show();        $.get(href)           .done(function() {                var $parent = $target.parent();                $parent.children("spinner").show();                $parent.children("a").remove();               $parent.children("span").remove();               $parent.attr("class", "");               $parent.css("background-color", color);                $(".spinner").hide();           });     };      $(".manualSubmitComplete")         .click(function() {             fetchUrl(this.href, $(this), "#B0FFB0")             return false;         });       $(".manualSubmitReject")         .click(function() {           fetchUrl(this.href, $(this), "#FF0000")           return false;         }); }); 
 
 

Relacionados problema

4  Función para mostrar una alerta  ( Function to display an alert ) 
Es un script de alerta de usuario. Funcionó en cada navegador que probé. Pero la función en sí se ve muy desordenada / repetitiva. ¿Hay alguna manera de hacer...

3  Aplicación de anulación dom  ( Dom override app ) 
Estoy construyendo una mini aplicación que se mostrará cuando JavaScript ha realizado los cambios en el DOM. Tengo todas las funciones que puedo pensar en la ...

1  ¿Puedo ajustar este código que muestra una tabla para ejecutar más rápido?  ( Can i adjust this code which displays a table to run faster ) 
this.displayData = function () { var i; var $thead = $(thead); var $tbody = $(tbody); var numberOfFields = columnDataFields.length; var n...

2  ¿Cómo hacer un pequeño cálculo en una caída cuando se hace clic?  ( How to do a small calculation on a drop down when clicked ) 
Tengo un formulario que requiere un cálculo cuando se hace clic en un selector desplegable múltiple, y aún muestra los clics de los cursos en tiempo real y, p...

1  Construyendo árbol de DOM de XML, comprobando / actualizando el puntaje promedio del jugador  ( Building dom tree from xml checking updating players average score ) 
Esta es la primera vez que analizo un archivo XML. Así que estaré agradecido por cualquier sugerencia sobre cómo se puede mejorar mi código. O si pudiera suge...

7  Elementos de anidación con apendchild  ( Nesting elements with appendchild ) 
Quiero hacer un navegación que se vea así: <nav class="socialmediaicons"> <ul> <li> <a> <img> </a> </li> </ul> </nav> ...

2  Validación instantánea de la longitud del campo de la forma  ( Instantaneous validation of form field length ) 
Dado que tengo una función que se puede hacer de unas maneras como de costumbre, me preguntaba qué sigue es el mejor para lograr la validación del formulario ...

5  Anexar múltiples niños a un nodo a la vez  ( Append multiple children to a node at once ) 
Este, mi intento de respuesta para una pregunta sobre So: Anexar múltiples artículos en JavaScript < / a> Me gustaría saber si he cometido errores en cuant...

4  Función de marcador de posición de búsqueda personalizada de Google en JavaScript  ( Google custom search placeholder function in javascript ) 
Problema: Tenemos una función de búsqueda personalizada de Google que reemplaza el atributo 99887776665544335 y funciona bien. ¿Serías tan amables y ayu...

3  Código de JavaScript para agregar botones y elimíntelos lentamente  ( Javascript code to add buttons and slowly remove them ) 
El código de mi javascript está funcionando, sin embargo, estoy buscando sugerencias sobre cómo puedo mejorar mi código existente para la reutilización y la c...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos