我相信我已经完成了 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; position:relative; 顶部:2px; }
最佳答案
您应该使用$('.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);
});
关于jquery - colorSelect 函数将 alt 标签传递到输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17435668/