[英]How can I improve repeating If statements?
我尝试编写一些滚动效果及其成功方法,但是我认为这样做会更好,并且我需要一些建议来简化这些代码。
var nowIndex = 0;
var pcMenuSelect = $('body').find('.carFormatMenu li');
var mbMenuSelect = $('body').find('.menu-cartype .item');
var dropText = mbMenuSelect.parents('.dropdown').find('.text');
var dropValue = mbMenuSelect.parents('.dropdown').find('input')
if (nowIndex == 0){
dropText.text(mbMenuSelect.eq(0).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(0).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(0).addClass('active selected');
dropValue.eq(0).val(mbMenuSelect.eq(0).text());
}
if (nowIndex == 1){
dropText.text(mbMenuSelect.eq(1).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(1).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(1).addClass('active selected');
dropValue.eq(1).val(mbMenuSelect.eq(1).text());
}
if (nowIndex == 2){
dropText.text(mbMenuSelect.eq(2).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(2).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(2).addClass('active selected');
dropValue.eq(2).val(mbMenuSelect.eq(2).text());
}
if (nowIndex == 3){
dropText.text(mbMenuSelect.eq(3).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(3).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(3).addClass('active selected');
dropValue.eq(3).val(mbMenuSelect.eq(3).text());
}
if (nowIndex == 4){
dropText.text(mbMenuSelect.eq(4).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(4).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(4).addClass('active selected');
dropValue.eq(4).val(mbMenuSelect.eq(4).text());
}
if (nowIndex == 5){
dropText.text(mbMenuSelect.eq(5).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(5).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(5).addClass('active selected');
dropValue.eq(5).val(mbMenuSelect.eq(5).text());
}
if (nowIndex == 6){
dropText.text(mbMenuSelect.eq(6).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(6).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(6).addClass('active selected');
dropValue.eq(6).val(mbMenuSelect.eq(6).text());
}
if (nowIndex == 7){
dropText.text(mbMenuSelect.eq(7).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(7).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(7).addClass('active selected');
dropValue.eq(7).val(mbMenuSelect.eq(7).text());
}
就是这样:
var nowIndex = 0;
var pcMenuSelect = $('body').find('.carFormatMenu li');
var mbMenuSelect = $('body').find('.menu-cartype .item');
var dropText = mbMenuSelect.parents('.dropdown').find('.text');
var dropValue = mbMenuSelect.parents('.dropdown').find('input');
if (nowIndex>0){
dropText.text(mbMenuSelect.eq(nowIndex).text());
pcMenuSelect.removeClass('current');
pcMenuSelect.eq(nowIndex).addClass('current');
mbMenuSelect.removeClass('active selected');
mbMenuSelect.eq(nowIndex).addClass('active selected');
dropValue.eq(nowIndex).val(mbMenuSelect.eq(nowIndex).text());
}
除了LalithKumar的答案外,还使用链接 。
var nowIndex = 0; var pcMenuSelect = $('body').find('.carFormatMenu li'); var mbMenuSelect = $('body').find('.menu-cartype .item'); var dropText = mbMenuSelect.parents('.dropdown').find('.text'); var dropValue = mbMenuSelect.parents('.dropdown').find('input'); if (nowIndex>0){ dropText.text(mbMenuSelect.eq(nowIndex).text()); pcMenuSelect.removeClass('current').eq(nowIndex).addClass('current'); mbMenuSelect.removeClass('active selected').eq(nowIndex).addClass('active selected'); dropValue.eq(nowIndex).val(mbMenuSelect.eq(nowIndex).text()); }
除了Dinesh的答案:
var nowIndex = 0;
var pcMenuSelect = $('body').find('.carFormatMenu li');
var mbMenuSelect = $('body').find('.menu-cartype .item');
var dropMenu=mbMenuSelect.parents('.dropdown');
if (nowIndex> 0){
dropMenu.find('.text').text(mbMenuSelect.eq(nowIndex).text());
pcMenuSelect.removeClass('current').eq(nowIndex).addClass('current');
mbMenuSelect.removeClass('active selected').eq(nowIndex).addClass('active selected');
dropMenu.find('input').eq(nowIndex).val(mbMenuSelect.eq(nowIndex).text());
}
我已经完成了mbMenuSelect的缓存。 但不是$('body')的原因,因为在整个主体上再次运行find函数会减慢执行速度。
创建一个封装通用功能的功能。
var pcMenuSelect = $('body').find('.carFormatMenu li') var mbMenuSelect = $('body').find('.menu-cartype .item') var dropText = mbMenuSelect.parents('.dropdown').find('.text') var dropValue = mbMenuSelect.parents('.dropdown').find('input') function updateSelect(index) { dropText.text(mbMenuSelect.eq(index).text()) pcMenuSelect .removeClass('current') .eq(index) .addClass('current') mbMenuSelect .removeClass('active selected') .eq(index) .addClass('active selected') dropValue.eq(index).val(mbMenuSelect.eq(index).text()) } // call the function with the index updateSelect(nowIndex)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.