Question

这就是我所拥有的，我正在尝试创建具有汽车模型的面板。当您单击标题链接时，我希望相应的面板可以滑入或滑出。它工作，但我觉得我的代码可能非常糟糕。

 /* START OF MODEL BAR */

                /* END OF MODEL BAR */

如何让我的代码更有效率？我觉得我在重复自己。

Answer 1

你可以使用这种方式实例：

/* use JQuery class selector */
$('.carType').on('click', foo);

var foo = function() {
   $(this).removeClass('carActive');
   var target = $(this).children('a').attr('href');
   $(target).addClass('carActive');
}

Answer 2

当您看到重复自己的代码时，请将其转换为函数：

var registerClickHandler = function(id, classToAdd) {
    $(id).click(function() {
        $('.carActive').removeClass('carActive');
        $(classToAdd).addClass('carActive');
    });
}

然后这个：

 $('#sedans').click(function() {
 $('.carActive').removeClass('carActive');
 $('#panel2-1').addClass('carActive');
 });
 $('#suv').click(function() {
 $('#panel2-2').addClass('carActive');
 $('.carActive').removeClass('carActive');    
 });
 $('#vert a').click(function() {
 $('.carActive').removeClass('carActive');
 $('#panel2-3').addClass('carActive');
 });
 $('#hybrid a').click(function() {
 $('.carActive').removeClass('carActive');
 $('#panel2-4').addClass('carActive');
 });
 $('#sport a').click(function() {
 $('.carActive').removeClass('carActive');
 $('#panel2-5').addClass('carActive');
 });

变成这样：

registerClickHandler('#sedans', '#panel2-1');
registerClickHandler('#suv', '#panel2-2');
registerClickHandler('#vert a', '#panel2-3');
registerClickHandler('#hybrid a', '#panel2-4');
registerClickHandler('#sport a', '#panel2-');

甚至这个：

var options = [
  {'#sedans': '#panel2-1'},
  {'#suv': '#panel2-2'},
  {'#vert a': '#panel2-3'},
  {'#hybrid a': '#panel2-4'},
  {'#sport a': '#panel2-'}
];

options.forEach(registerClickHandler)

Answer 3

事件委托机制是另一种选择（对我而言，在这种情况下是最佳选择）。它不依赖于id，而是依赖于html结构本身。

// attach the event to the first common ancestor holding #sedans, #suv, #vert, #hybrid and #sport ... Then no need to hard code ids, you can even add entry via ajax and it will still work
    $('dl.tabs').on('click', function(e){
        var $dd = $(e.target).closest('dd'),
            $a = $dd.find('a');
        if($a.length){
            var ids = $.map(
                $.makeArray($dd.parent().find('a[href^="#panel"]')),
                function(el, i){ return $(el).attr('href'); }
            ).join(','); // This build a selector of all panels linked inside the menu
            $(ids).add($dd.siblings()).removeClass('carActive')
                .filter($a[0].hash).add($dd).addClass('carActive');
            // e.preventDefault(); you may want to prevent the browser to scroll to the anchor id
        }
    });

小提琴here

如何让这个脚本变得更好？

3 个答案: