Haciendo una selección en un menú desplegable basado en varios valores posibles -- javascript campo con jquery campo con array campo con google-chrome camp codereview Relacionados El problema

Making a selection in a dropdown based on several possible values


3
vote

problema

Español

Estoy haciendo una extensión de cromo que le permite elegir un tamaño de un artículo y revisar rápidamente.

Tengo un valor llamado "grande" en sizePref matriz en mi cromo.storage. Y cuando llama ese valor, elegirá una opción en un menú desplegable basado en eso. Sin embargo, las posibles etiquetas son "grandes", "L", "M / L" o "L / XL" ("Gran" siendo el más a menudo) con el valor cambiante cada vez.

¿Cuál es la forma más eficiente para que me asegure de que haga la selección correcta (asumiendo la velocidad de hacerlo es la prioridad más alta)?

Este es mi código actual que solo elige "L" si "grande" no existe. Este código funciona sin errores, pero quiero que se mejore.

  chrome.storage.sync.get('sizePref', function(items) { // Get size preferences from storage         var sizePref = items.sizePref.top1; // Set size to a var          var sizeVal = $("#size option").filter(function() {             return $(this).html() == sizePref;         }).val();          var sizeVal2 = $("#size option").filter(function() {             return $(this).html() == "L";         }).val();            if (sizeVal !== undefined) {             $("#size").val(sizeVal);         } else {             $("#size").val(sizeVal2);         }       });   

El código desplegable objetivo es el siguiente:

  <select id="size" name="size"><option value="25243">Small</option> <option value="25244">Medium</option> <option value="25245">Large</option> <option value="25246">XLarge</option></select>   
Original en ingles

I'm making a Chrome extension that lets you choose a size of an item and check out quickly.

I have a value called "Large" in sizePref array in my chrome.storage. And when it calls that value, it will choose an option in a dropdown based on that. However, possible labels are "Large", "L", "M/L" or "L/XL" ("Large" being the most often) with the value changing each time.

What is the most efficient way for me to ensure that it makes the correct selection (assuming the speed of doing so is the highest priority)?

This is my current code which just chooses "L" if "Large" doesn't exist. This code works without errors, but I want it to be improved.

chrome.storage.sync.get('sizePref', function(items) { // Get size preferences from storage         var sizePref = items.sizePref.top1; // Set size to a var          var sizeVal = $("#size option").filter(function() {             return $(this).html() == sizePref;         }).val();          var sizeVal2 = $("#size option").filter(function() {             return $(this).html() == "L";         }).val();            if (sizeVal !== undefined) {             $("#size").val(sizeVal);         } else {             $("#size").val(sizeVal2);         }       }); 

The targeted dropdown code is as follows:

<select id="size" name="size"><option value="25243">Small</option> <option value="25244">Medium</option> <option value="25245">Large</option> <option value="25246">XLarge</option></select> 
           

Lista de respuestas

1
 
vote

Si la velocidad es importante, entonces debe evitar las miradas DOM innecesarias. Por ejemplo, Si sizeVal no es undefined , entonces nunca necesitará otra búsqueda de dom para sizeVal2 . Puede reorganizar el código en consecuencia:

      var sizeVal = $("#size option").filter(function() {         return $(this).html() == sizePref;     }).val();      if (sizeVal !== undefined) {         $("#size").val(sizeVal);     } else {         var sizeVal2 = $("#size option").filter(function() {             return $(this).html() == "L";         }).val();         $("#size").val(sizeVal2);     }   

Iría aún más un caché el $("#size option") , y también mueva la lógica repetida en una función:

  var options = $("#size option");  function findSize(target) {     options.filter(function() { return $(this).html() == target; }); }  var size = findSize(sizePref).val() || findSize("L").val(); var $("#size").val(size);   
 

If speed is important, then you should avoid unnecessary dom lookups. For example, if sizeVal is not undefined, then you'll never need another dom lookup for sizeVal2. You can rearrange the code accordingly:

    var sizeVal = $("#size option").filter(function() {         return $(this).html() == sizePref;     }).val();      if (sizeVal !== undefined) {         $("#size").val(sizeVal);     } else {         var sizeVal2 = $("#size option").filter(function() {             return $(this).html() == "L";         }).val();         $("#size").val(sizeVal2);     } 

I would go even further an cache the $("#size option"), and also move the repeated logic into a function:

var options = $("#size option");  function findSize(target) {     options.filter(function() { return $(this).html() == target; }); }  var size = findSize(sizePref).val() || findSize("L").val(); var $("#size").val(size); 
 
 

Relacionados problema

1  Extensión de cromo: reemplace las palabras en una página de un gran diccionario  ( Chrome extension replace words on a page from a large dictionary ) 
Esto funciona, pero es muy lento. Cualquier recomendación sobre mejores formas mejor, menos triviales de lograr esto se apreciaría. Con un diccionario más peq...

4  Helete de instancias / herencia  ( Instantiation inheritance helper ) 
Por el bien de aprender JavaScript, mejor y acostumbrarse a la API de Extensión de Google Chrome, actualmente estoy escribiendo una pequeña extensión de cromo...

3  Utilice el evento de almacenamiento local  ( Use local storage event ) 
Utilizo el siguiente código que está funcionando OK para registrarse y emitir el evento para el almacenamiento local en el navegador. Será genial si puede dar...

2  Extensión de cromo para obtener la URL de Video de YouTube  ( Chrome extension to get youtube videos url ) 
Necesitaba algo que obtendría la URL de un video elegido de YouTube y guardarlo en un archivo. Dado que no encontré una manera de escribir / editar un archi...

2  Entrada de gama elegante, solo Google Chrome  ( Stylish range input google chrome only ) 
Tengo un elemento 99887766555443315 que se personaliza utilizando CSS para lucir más moderno. Estoy descontento con mi CSS debido a la necesidad de usar ...

1  Sitio web con imágenes que pasan a diferentes lados  ( Website with images that pan to different sides ) 
Acabo de comenzar a programar con JavaScript y actualmente estoy trabajando en este proyecto de sitio web de Hobby. Se supone que el sitio muestra las páginas...

3  Proyecto: Mi buscador de anime  ( Project my anime finder ) 
Este es un proyecto que encuentra un anime específico (mostrar) y los controles para ver si hay un nuevo episodio de él. Esta es también la primera vez que ...

5  Eliminar secciones de contenido de quora.com  ( Remove sections of content from quora com ) 
Escribí una extensión del navegador Chrome para ocultar las publicaciones de contenido superior de Quora, que molestan a los usuarios siguiendo demasiado tema...

4  Auto Backup Chrome Bookmarks  ( Auto backup chrome bookmarks ) 
Este script, una vez agregado al Programador de Windows, crea automáticamente una copia de seguridad de sus marcadores de Google Chrome. #!/usr/bin/env bas...

2  Extensión de cromo que le permite presionar cambios de las herramientas de desarrollador de cromo directamente a GitHub  ( Chrome extension that lets you push changes from chrome developer tools directly ) 
hace 2 meses, escribí una extensión de cromo llamada hotfix . Recientemente volví a mirar por encima del código y me hizo temblar un poco. Lo refacté un poco...




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