Tengo una página de producto del sitio web de comercio electrónico para un producto con opciones de color.
Estoy tratando de copiar el valor del atributo de color seleccionado y agregarlo al título del producto, y estoy usando cualquier cambio en el valor de #pa_finish como disparador, para garantizar que el título se actualice con la selección actual.
Aquí está el código que estoy usando actualmente:
$( '#pa_finish' ).change(function(){ var var_name = $('#pa_finish :selected').text(); var original = $('h1.product_title.entry-title').text(); $('h1.product_title.entry-title').html(original + ' ' + var_name); });El problema que tengo es que, en lugar de que el título se actualice con cada activador, la variable var_name se itera junto con el valor anterior, por lo que el título del producto simplemente aumenta de longitud.
Idealmente, el valor de texto preexistente de var_name se borra y se reemplaza con la nueva selección cada vez que se realiza un cambio.
¿Hay algún medio por el cual pueda "restablecer" la función cada vez que se activa? Gracias de antemano por cualquier ayuda o información que alguien pueda proporcionar.
Gracias a todos por sus aportes. Me di cuenta de que, como se señaló en los comentarios, no había establecido un valor de referencia para mi título.
Tengo un ejemplo de trabajo ahora:
var title = $('h1.product_title.entry-title').text(); $( '#pa_finish' ).change(function() { var var_name = $('#pa_finish :selected').text(); $('h1.product_title.entry-title').html(title + ' ' + var_name); });Establecí un valor para el título original en una variable 'título' (fuera de la función), de modo que cuando la función se ejecute, reemplace el HTML de:
$('h1.product_title.entry-title')...con una combinación del título original y la variable var_name, en cada cambio.
Antes, simplemente cargaba el selector una y otra vez y etiquetaba el resultado de var_name, razón por la cual vi la repetición.
Espero que esto pueda ayudar a alguien en el futuro.