1

我相信我已经完成了 90% 的代码。我想要实现的是为任何目的创建一个可重用的函数。该函数的作用是当用户选择一个色样时，img 上的 alt 标签被发送到输入字段。我似乎对实际功能本身有疑问，因为当我单击颜色时似乎没有发生任何事情。目前这作为一个 Jquery 程序工作，但我现在正试图将它构建为我们库的一部分。jsfiddle

jQuery

颜色选择 = 函数 () {

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

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 回答
2

您将函数的结果设置为处理程序，而不是将函数引用本身设置为处理程序。

在这里，当您绑定处理程序并将结果附加为函数的处理程序时，将调用该函数，在您的情况下，该函数是一个布尔值。

改变：

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

至

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

另外，选择器也是区分大小写的#FIELD_！=#Field_

小提琴

于 2013-07-02T20:55:31.343 回答