1

コードの 90% は完成したと思います。私が達成しようとしているのは、あらゆる目的で再利用可能な関数を作成することです。この関数の役割は、ユーザーが色見本を選択すると、画像の alt タグが入力フィールドに送信されることです。色をクリックしても何も起こらないように見えるため、実際の機能自体に問題があるようです。現在、これは Jquery プログラムとして機能しますが、ライブラリの一部として関数として構築しようとしています。jsfiddle

Jクエリ

colorSelect = 関数 () {

var colorval = $('#FIELD_').val();
$(this).find('img[alt="' + colorval + '"]').addClass('color-field-selected');
    var colortitle = $(this).attr('alt');
    $(this).addClass('color-field-selected').siblings().removeClass('color-field-selected');

    $('#FIELD_').attr('value', colortitle);

    return false;

}; $(関数(){

  $('.color-field img').on( 'click',colorSelect());

});

HTML

<div class="color-field">
  <div class="color-size">
<img border="0" src="http://www.pflivedevelopment.com/custom/tabs_custom_skin/images/black.jpg" title="PMS Black 185" alt="Black">
<img border="0" src="http://www.pflivedevelopment.com/custom/tabs_custom_skin/images/green.jpg" title="Green PMS 347" alt="Green">
 <img border="0" src="http://www.pflivedevelopment.com/custom/tabs_custom_skin/images/blue.jpg" title="Blue PMS 300" alt="Blue">
 <img border="0" src="http://www.pflivedevelopment.com/custom/tabs_custom_skin/images/red.jpg" title="Red PMS 185" alt="Red">
   </div>
    <input id="Field_" type="text">
</div>

CSS

.color-size {
height: 45px;
overflow: hidden;
}
.color-size img {
cursor: pointer;
}
.color-field-selected {

ボーダー: 2px ソリッド #000000; 位置: 相対; 上: 2px; }

4

2 に答える 2

2

関数参照自体をハンドラーに設定するのではなく、関数の結果をハンドラーとして設定しています。

ここで、ハンドラーをバインドし、結果を関数のハンドラーとしてアタッチすると、関数が呼び出されます。この場合、ブール値です。

変化する：

$('.color-field img').on( 'click',colorSelect());

に

$('.color-field img').on( 'click',colorSelect);

さらに、セレクターは大文字と小文字を区別するので、#FIELD_!=#Field_

フィドル

于 2013-07-02T20:55:31.343 に答える
2

http://jsfiddle.net/8vs6R/5/

あなたは使用すべき$('.color-field img').on('click', colorSelect); // <-- Removed ()
であり、あなたのIDはそうではありません#FIELD_; #Field_）

colorSelect = function () {

    var colorval = $('#Field_').val();
    $(this).find('img[alt="' + colorval + '"]').addClass('color-field-selected');
    var colortitle = $(this).attr('alt');
    $(this).addClass('color-field-selected').siblings().removeClass('color-field-selected');

    $('#Field_').attr('value', colortitle);

    return false;
};
$(function () {

    $('.color-field img').on('click', colorSelect);
});

そこには無駄なものやロジックがたくさんあります。
コードを簡素化するには、次のようにします:
http://jsfiddle.net/8vs6R/10/

function colorSelect() {
    $(this).addClass('color-field-selected').siblings().removeClass('color-field-selected');
    $('#Field_').val(this.alt) ;
}


$(function () {
    $('.color-field img').on('click', colorSelect);
});
于 2013-07-02T20:54:18.577 に答える