Farbtastic Multiple Fields - Wordpress

Question

Я разрабатываю тему wordpress. Сейчас я работаю над страницей параметров темы. Я добавил farbtastic (4 поля), и проблема в том, что каждый раз, когда я нажимаю на вход, на других трех полях появляется и цветовой выбор. Кто-нибудь знает, как это исправить? Спасибо!

<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> 

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> 

Answer 1

Вы ссылаетесь на слишком широкий элемент с помощью селектора jQuery. По сути ваш код говорит каждый раз, когда вы нажимаете что-либо с классом color-picker, покажите что-нибудь с классом fabox.

Вы должны сделать свою ссылку более конкретной для текущего щелчка .color-picker.

Я рекомендую заменить это:

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

С этим:

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

Таким образом, вы только ссылки на .fabox, который подключен к .color-picker вы кликнули.

EDIT: Как было отмечено gillesc, это фактически будет быстрее использовать:

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

До тех пор, как в .fabox всегда следует .color-picker.

Если .fabox был внутри одного контейнера, но не на следующий элемент, который вы могли бы использовать:

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

Answer 2

Вам не нужно использовать for (e in foo) с помощью jQuery.each(), это намного чище и здесь ваш адрес является глобальной переменной, которая очень плохо, с каждым, что ошибка может Слушай.

Также используется $(function(){}); вместо $(document).ready(function(){});, он делает то же самое, но вы получаете лучший след, и ваш код немного легче читать.

И в функции готовности дома вам не нужен аргумент $ в качестве аргумента, когда вам нужно закрыть и является способом гарантировать, что $ является jQuery внутри закрытия.

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

Так что ваш код в конечном итоге, как это вместо того, что у вас есть

$(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(); 
    }); 
});​ 

И я думаю, ваша проблема может быть idtencial идентификаторы, так что перепутать плагин, но чтобы быть справедливым было бы легче, если вам отправляйте результат HTML, а не код PHP, так как это DOM, который мы хотим видеть, и его трудно догадаться, не зная, что выводят переменные PHP.