Question

我尝试写一些滚动效果及其成功，但我认为它会做得更好，我需要一些建议来简化这些代码。

 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());

    }

Answer 1

就这样做：

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());
}

Answer 2

除了LalithKumar的答案之外，还使用了chaining。

＆＃13;

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());
}

＆＃13;

Answer 3

除了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 进行了缓存。但不是 $（＆＃39; body＆＃39;），因为在整个身体上再次运行查找功能会降低执行速度。

Answer 4

创建一个封装常用功能的函数。

＆＃13;

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)

＆＃13;

如何简化这些代码？

4 个答案: