我提出这个问题因为我还在学习javascript。我几乎肯定这不是写这个函数的正确方法,但是它有效。这很难看,但它确实有效。只是从一个脚本看,你能看到一个明显的疏忽,这会使代码更整洁,更具语义性吗?
$('#model').on('change', function(){
var yxs = $('#model').find('option:selected').attr('data-yxs');
var ys = $('#model').find('option:selected').attr('data-ys');
var ym = $('#model').find('option:selected').attr('data-ym');
var yl = $('#model').find('option:selected').attr('data-yl');
var yxl = $('#model').find('option:selected').attr('data-yxl');
var xs = $('#model').find('option:selected').attr('data-xs');
var s = $('#model').find('option:selected').attr('data-s');
var m = $('#model').find('option:selected').attr('data-m');
var l = $('#model').find('option:selected').attr('data-l');
var xl = $('#model').find('option:selected').attr('data-xl');
var xxl = $('#model').find('option:selected').attr('data-xxl');
var xxxl = $('#model').find('option:selected').attr('data-xxxl');
var xxxxl = $('#model').find('option:selected').attr('data-xxxxl');
if (yxs != '') {
$('#yxs').prop('disabled', false);
}
else {
$('#yxs').prop('disabled', true);
}
if (ys != '') {
$('#ys').prop('disabled', false);
}
else {
$('#ys').prop('disabled', true);
}
if (ys != '') {
$('#ym').prop('disabled', false);
}
else {
$('#ym').prop('disabled', true);
}
if (ys != '') {
$('#yl').prop('disabled', false);
}
else {
$('#yl').prop('disabled', true);
}
if (ys != '') {
$('#yxl').prop('disabled', false);
}
else {
$('#yxl').prop('disabled', true);
}
if (ys != '') {
$('#xs').prop('disabled', false);
}
else {
$('#xs').prop('disabled', true);
}
if (ys != '') {
$('#s').prop('disabled', false);
}
else {
$('#s').prop('disabled', true);
}
if (ys != '') {
$('#m').prop('disabled', false);
}
else {
$('#m').prop('disabled', true);
}
if (ys != '') {
$('#l').prop('disabled', false);
}
else {
$('#l').prop('disabled', true);
}
if (ys != '') {
$('#xl').prop('disabled', false);
}
else {
$('#xl').prop('disabled', true);
}
if (ys != '') {
$('#xxl').prop('disabled', false);
}
else {
$('#xxl').prop('disabled', true);
}
if (ys != '') {
$('#xxxl').prop('disabled', false);
}
else {
$('#xxxl').prop('disabled', true);
}
if (ys != '') {
$('#xxxxl').prop('disabled', false);
}
else {
$('#xxxxl').prop('disabled', true);
}
});
答案 0 :(得分:5)
您可以尝试这样做:
$('#model').on('change', function(){
var data = $(this).find('option:selected').data();
for (var key in data) {
$("#" + key).prop("disabled", data[key] == '');
}
});
这可以通过将匹配元素(选项:选中)上的所有data- *属性抓取到格式的对象中来实现:
{
yxs : 'some value',
ys : '',
etc.
}
然后,您可以使用for循环遍历此对象,该循环将对象属性的左侧(即:yxs,ys等)存储到键变量中。在循环中,您可以获取相应的元素:
$("#" + key)
并根据表达式的评估将disabled属性设置为true或false:
data[key] == ''
根据上面的对象示例将转换为
data['ys'] == ''
或
data['yxs'] == ''
等
答案 1 :(得分:2)
尝试
$('#model').on('change', function(){
var $selcted = $('#model').find('option:selected');
$('#yxs').prop('disabled', $selcted.data('yxs') == '');
$('#ys').prop('disabled', $selcted.data('ys') == '');
$('#ym').prop('disabled', $selcted.data('ym') == '');
$('#yl').prop('disabled', $selcted.data('yl') == '');
$('#xs').prop('disabled', $selcted.data('xs') == '');
$('#s').prop('disabled', $selcted.data('s') == '');
$('#m').prop('disabled', $selcted.data('m') == '');
$('#l').prop('disabled', $selcted.data('l') == '');
$('#xl').prop('disabled', $selcted.data('xl') == '');
$('#xxl').prop('disabled', $selcted.data('xxl') == '');
$('#xxxl').prop('disabled', $selcted.data('xxxl') == '');
$('#xxxxl').prop('disabled', $selcted.data('xxxxl') == '');
$('#xl').prop('disabled', $selcted.data('xl') == '');
$('#xl').prop('disabled', $selcted.data('xl') == '');
$('#xl').prop('disabled', $selcted.data('xl') == '');
});
另一个版本可能是
$('#model').on('change', function(){
var $selcted = $('#model').find('option:selected');
function setDisabled(key){
$('#' + key).prop('disabled', $selcted.data(key) == '');
}
setDisabled('yxs');
setDisabled('ys');
....
});