Campos Múltiples Farbtastic - Wordpress

Estoy desarrollando un tema de wordpress. Estoy trabajando en la página de opciones de tema en este momento. Agregué farbtastic (4 campos) y el problema es que cada vez que hago clic en la entrada, el selector de color también aparece en los otros 3 campos. ¿Alguien sabe cómo arreglar esto? ¡Gracias!

<div> <br />
  <label for="<?php echo $colorPicker['ID']; ?>"><?php _e($colorPicker['label']); ?></label>
  <input type="text" class="color-picker" id="<?php echo $colorPicker['ID']; ?>" value="<?php echo get_option($colorPicker['ID']); ?>" name="<?php echo $colorPicker['ID']; ?>" />
  <div id="<?php echo $colorPicker['ID']; ?>_color" class="fabox"></div>            </div>          
<?php endforeach; ?>            
<p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>
</form>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
    var colorPickers = $('.color-picker');
    console.log(colorPickers);
    for (e in colorPickers) {
        if (colorPickers[e].id != undefined) {
            var colorPickerID = colorPickers[e].id;
            $('#' + colorPickerID + '_color').farbtastic('#' + colorPickerID);
        }
    }

    $('.fabox').hide();


    $('.color-picker').click(function() {
        $('.fabox').fadeIn();
    });

    $(document).mousedown(function() {
        $('.fabox').each(function() {
            var display = $(this).css('display');
            if (display == 'block') $(this).fadeOut();
        });
    });
});​
</script>

SALIDA HTML:

<form method="POST" action="">  

                        <div>

            <br />

            <label for="color_1"><strong>Post Title</strong></label>

            <input type="text" class="color-picker" id="color_1" value="#273990" name="color_1" />

            <div id="color_1_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_2"><strong>Paragraph Text</strong></label>

            <input type="text" class="color-picker" id="color_2" value="#840000" name="color_2" />

            <div id="color_2_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_3"><strong>Example</strong></label>

            <input type="text" class="color-picker" id="color_3" value="#4377df" name="color_3" />

            <div id="color_3_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_4"><strong>And Another Example</strong></label>

            <input type="text" class="color-picker" id="color_4" value="#3c8400" name="color_4" />

            <div id="color_4_color" class="fabox"></div>

            </div>

                        <p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>

        </form>

    </div>

preguntado el 03 de mayo de 12 a las 16:05

Creo que está haciendo referencia a un elemento demasiado amplio con su selector jQuery. Esencialmente, su código dice cada vez que hace clic en cualquier cosa con el color-picker clase, mostrar cualquier cosa con el fabox clase. Debe hacer su referencia más específica al clic actualmente .color-picker. Tal vez reemplazar $('.fabox').fadeIn(); con $(this).parent().find('.fabox').fadeIn();, o algo similar a eso. -

ericissocial muchas gracias por tu ayuda. ¡Tu código que proporcionaste hizo la magia! ¡Muchas gracias! -

2 Respuestas

Estás haciendo referencia a un elemento demasiado amplio con tu selector de jQuery. Esencialmente, su código dice cada vez que hace clic en cualquier cosa con el color-picker clase, mostrar cualquier cosa con el fabox clase.

Debe hacer su referencia más específica al clic actualmente .color-picker.

Recomiendo reemplazar esto:

$('.fabox').fadeIn();

Con este:

$(this).parent().find('.fabox').fadeIn();

Así que solo estás haciendo referencia a la .fabox que está conectado a la .color-picker acabas de hacer clic.

EDITAR: Como señaló Gillesc, en realidad sería más rápido de usar:

$(this).next().fadeIn();

Mientras el .fabox siempre sigue el .color-picker.

Si .fabox estaba dentro del mismo contenedor, pero no el siguiente elemento que podría usar:

$(this).next('.fabox').fadeIn();

contestado el 03 de mayo de 12 a las 21:05

No necesitas usar for (e in foo) usar jQuery.each(), es mucho más limpio y aquí su e es una variable global que es bastante mala, con cada error no puede ocurrir.

También use $(function(){}); en lugar de $(document).ready(function(){}); hace exactamente lo mismo pero obtienes una mejor huella y tu código es un poco más fácil de leer.

Y en la función dom ready no necesita $ como argumento, que cuando necesita un cierre y es una forma de garantizar que $ es jQuery dentro del cierre.

(function($) {
  // your code
})(jQuery);

Entonces tu código termina así en lugar de lo que tienes

$(function() {

    $('.color-picker').each(function() {
        if (this.id) {
            $('#' + this.id + '_color').farbtastic('#' + this.id);
        };
    }).click(function() {
        $(this).next().fadeIn();
    });

    $('.fabox').hide();

    $(document).mousedown(function() {
        $('.fabox:visible').fadeOut();
    });
});​

Y creo que su problema podría ser las ID de identificación, por lo que confunde el complemento, pero para ser justos, sería más fácil si publica la salida HTML en lugar del código PHP, ya que es el DOM que queremos ver y es difícil adivinar sin saber cuál es el Se están generando variables de PHP.

contestado el 03 de mayo de 12 a las 17:05

Gracias por tu respuesta gillesc. El código que proporcionó no solo no funcionó como yo quería, sino que ahora farbtastic no funciona en absoluto. Edité la publicación para proporcionar la SALIDA HTML. - geoarg

Lo siento, no tenía los medios para probarlo. Ah, tu problema está aquí, entonces cuando haces $('.fabox').hide(); te estás escondiendo y cuando haces fadeIn() haces lo mismo porque es una clase, todos los elementos que contienen esa clase se ven afectados, por lo que todos aparecen. Por lo tanto, debe atravesar el DOM en relación con el clic del elemento. Actualizaré mi publicación - gillesc

Como su selector de color está al lado de su .fadbox $(this).next().fadeIn(); dentro del controlador de clics debería funcionar - gillesc

¡Lo mismo que me dijo ericissocial y sí funcionó! Muchas gracias a los dos chicos!!! - geoarg

También puede usar el pseudoselector :visible para tomar el visible y ocultarlo $('.fabox:visible').fadeOut(); api.jquery.com/visible-selector - gillesc

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.