1

私はワードプレスのテーマを開発しています。現在、テーマ オプション ページに取り組んでいます。farbtastic (4 つのフィールド) を追加しましたが、問題は、入力をクリックするたびに、他の 3 つのフィールドにもカラー ピッカーが表示されることです。誰でもこれを修正する方法を知っていますか? ありがとうございました！

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

2 に答える 2

2

jQuery セレクターで参照している要素が広すぎます。基本的に、コードは、クラスで何かをクリックするたびに、color-pickerクラスで何かを表示すると言いますfabox。

現在クリックされている.color-picker.

これを置き換えることをお勧めします：

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

これとともに：

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

したがって、クリック.faboxした に接続されている のみを参照しています。.color-picker

編集：gillescが指摘したように、実際には使用する方が速いでしょう：

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

.faboxが常に に続く限り.color-picker。

が同じコンテナー内にある.faboxが、使用できる次の要素ではない場合:

$(this).next('.fabox').fadeIn();
于 2012-05-03T16:29:56.750 に答える
1

for (e in foo)usingを使用する必要はありませんjQuery.each()。これははるかにクリーンであり、ここで e はかなり悪いグローバル変数であり、それぞれの間違いが発生することはありません。

また、$(function(){});代わりに使用$(document).ready(function(){});してもまったく同じですが、フットプリントが良くなり、コードが少し読みやすくなります。

そして、dom ready 関数では、引数として $ は必要ありません。これは、クロージャーが必要であり、$ がクロージャー内の 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();
    });
});​

そして、あなたの問題は同一のIDである可能性があるため、プラグインを混乱させる可能性があると思いますが、PHPコードではなくHTML出力を投稿すると、それが見たいDOMであり、何がPHP変数が出力されています。

于 2012-05-03T16:04:43.677 に答える