首先,感谢所有通过Stackoverflow上的榜样帮助我进步,学习和自学的人。除此之外,我最近发布了有关在http://beta.acinonyxsim.com/demo上找到的演示的信息。我回来的另一个问题与我以前的问题不太吻合:
添加基本标记时,某些标记仅限于棕褐色/白色。目前,当您首先单击添加基本标记,然后根据需要禁用和重新启用时,我将列出所有可用的颜色。这似乎可行,但是在更改时,它将取值并将其放在所有.base_marking_color分类的下拉列表中。我的代码如下:
$('div#base_markings').on('change', 'select.base_marking', function(){
$('select.base_marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
$(this).data('index', this.value);
$('select.base_marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
$(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
var base_marking = $.trim($(this).find('option:selected').text());
var base_marking_color = $(this).closest('div.base_marking_options').find('select.base_marking_color').val();
if (base_marking == 'Back Leg' || base_marking == 'Blanket' || base_marking == 'Cape' || base_marking == 'Cloak' || base_marking == 'Cloak 2' || base_marking == 'Coat' || base_marking == 'Dorsal' || base_marking == 'Edging' || base_marking == 'Forehead' || base_marking == 'Front' || base_marking == 'Inners' || base_marking == 'Legs' || base_marking == 'Limbs' || base_marking == 'Lower Belly' || base_marking == 'Mask' || base_marking == 'Nooks' || base_marking == 'Parts' || base_marking == 'Paws' || base_marking == 'Royal (Wild Only)' || base_marking == 'Sable 1' || base_marking == 'Sable 2' || base_marking == 'Saddle' || base_marking == 'Shoulder' || base_marking == 'Smudge' || base_marking == 'Spots' || base_marking == 'Swabs' || base_marking == 'Tail' || base_marking == 'Top' || base_marking == 'Trim' || base_marking == 'Under Flank (Wild Only)' || base_marking == 'Upper Belly') {
$('select.base_marking_color option[value="5"]').prop('disabled', false);
$('select.base_marking_color option[value="4"]').prop('disabled', false);
$('select.base_marking_color option[value="7"]').prop('disabled', false);
$('select.base_marking_color option[value="2"]').prop('disabled', false);
$('select.base_marking_color option[value="3"]').prop('disabled', false);
$('select.base_marking_color option[value="8"]').prop('disabled', false);
$('select.base_marking_color option[value="6"]').prop('disabled', true);
$('select.base_marking_color option[value="1"]').prop('disabled', true);
if (base_marking_color == '' || base_marking_color == 6 || base_marking_color == 1) {
$('select.base_marking_color').val('5');
}
else {
$('select.base_marking_color').val(base_marking_color);
}
}
else if (base_marking == 'Bottom' || base_marking == 'Chest' || base_marking == 'Collar' || base_marking == 'Tail End' || base_marking == 'Tail Tip' || base_marking == 'Tips' || base_marking == 'Toes' || base_marking == 'Unders 1' || base_marking == 'Unders 2' || base_marking == 'Unders 3' || base_marking == 'Unders 4' || base_marking == 'Unders 5' || base_marking == 'Unders 6' || base_marking == 'Unders 7' || base_marking == 'Unders 8 (Wild Only)') {
$('select.base_marking_color option[value="5"]').prop('disabled', true);
$('select.base_marking_color option[value="4"]').prop('disabled', true);
$('select.base_marking_color option[value="7"]').prop('disabled', true);
$('select.base_marking_color option[value="2"]').prop('disabled', true);
$('select.base_marking_color option[value="3"]').prop('disabled', true);
$('select.base_marking_color option[value="8"]').prop('disabled', true);
$('select.base_marking_color option[value="6"]').prop('disabled', false);
$('select.base_marking_color option[value="1"]').prop('disabled', false);
if (base_marking_color == '' || base_marking_color != 6 && base_marking_color != 1) {
$('select.base_marking_color').val('6');
}
else {
$('select.base_marking_color').val(base_marking_color);
}
}
processDemo();
});
对于任何格式化错误,我深表歉意,盲目地使其很难正确格式化。
总之,此代码应执行以下操作:
当基础标记更改时,禁用并重新启用必要的颜色
如果用户在具有相同颜色集的标记之间进行更改(例如:底部,胸部,底部等为白色/棕褐色)时,请保持用户的选择。
非常感谢您提供的任何帮助。
最佳答案
这是因为当您设置值时,您的jQuery选择器是一个类,因此具有该类的所有元素都将获得该值:
$('select.base_marking_color').val(base_marking_color);
相反,您应该只选择当前元素。
幸运的是,您已经在那段令人难以置信的长base_marking if子句之前的行中执行了此操作:
var base_marking_color = $(this).closest('div.base_marking_options').find('select.base_marking_color').val();
1.只需将该行更改为以下两行:
var base_marking_option = $(this).closest('div.base_marking_options').find('select.base_marking_color')[0];
var base_marking_color = $(base_marking_option).val();
最后需要
[0]
来选择jQuery对象内部的实际DOM元素。2.现在,将设置值的行更改为此:
$(base_marking_option).val(base_marking_color);
(您还可以在其他三行中设置该值,显然也可以更改它们。)