如何简化 jQuery 代码答案

【问题标题】：How to simplify jQuery code如何简化 jQuery 代码
【发布时间】：2012-12-05 18:42:59
【问题描述】：

这是我使用 jQuery 的开始。我做了一个简单的内容滑动导航，它非常适合我，但我不知道如何简化我的代码：

$(document).ready(function(){
    // Sliding content navigation
    var active = ".active"
    $('a.europa').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#europa-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#italia-view, #emilia-view').removeClass('active');
        $('#europa-view').addClass('active');        
    });

    $('a.italia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#italia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #emilia-view').removeClass('active');
        $('#italia-view').addClass('active');
    });

    $('a.emilia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#emilia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #italia-view').removeClass('active');
        $('#emilia-view').addClass('active');
    });
});

Demo

【问题讨论】：

谁投票以离题结束？这不是这样的事情。

标签： jquery navigation sliding

【解决方案1】：

试试这个：

Javascript：

// Sliding content navigation
var active = ".active"
$('a.sharedClass').click(function() {
    var name = $(this).attr('name');
    $(active).hide("slide", { direction: "left" }, 500).removeClass('active');

    $('#' + name).delay(500).show("slide", { direction: "left" }, 500)
                 .addClass('active');
});

列表的新 HTML：

<div id="view-navigator">
    <ul id="view-list">
        <li class="europa"><a href="#" class="europa sharedClass" name="europa-view">europa</a></li>
        <li class="italia"><a href="#" class="italia sharedClass" name="italia-view">italia</a></li>
        <li class="emilia"><a href="#" class="emilia sharedClass" name="emilia-view">emilia-romagna</a></li>
    </ul>
</div>

演示：http://jsfiddle.net/maniator/Tbrvv/

【讨论】：

非常感谢！这正是我想要的:)

【解决方案2】：

尝试修改您的代码以使用类。见下文，

演示： http://jsfiddle.net/92HXT/272/

$(document).ready(function() {
    // Sliding content navigation
    var active = ".active"
    $('a.showcontent').click(function() {
        $(active).hide("slide", { direction: "left" }, 500);
        $('.news-list').removeClass('active');
        $('#' + this.name).delay(500).show("slide", { direction: "left" }, 500)
                          .addClass('active');
    });

});

如下一些标记更改，

    <ul id="view-list">
        <li class="europa"><a href="#" class="europa showcontent" name="europa-view">europa</a></li>
        <li class="italia"><a href="#" class="italia showcontent" name="italia-view">italia</a></li>
        <li class="emilia"><a href="#" class="emilia showcontent" name="emilia-view">emilia-romagna</a></li>
    </ul>

【讨论】：

@Neal 大声笑.. 不是真的.. 只是格式化。我们仍然有 1 个不同.. this.name 和 .active 的使用
我做了什么？我以同样的方式重新格式化^_^，我的第二个答案比你早24秒发布：-P
@Neal 哦，我想你之前有过$('#' + name).addClass('active')：P 没关系，只要答案不同。
哈哈。我意识到没有理由重复选择$('#' + name)，所以我将其合并为一个。

【解决方案3】：

创建一个函数，该函数将获取需要显示的元素的 id，点击时您只需使用所需的 id 运行该函数：

$(document).ready(function(){
  var active = ".active";

  var clickEvent = function (itemToShow){
    $(active).hide("slide", { direction: "left" }, 500);
    $('#italia-view, #emilia-view, #europa-view').removeClass('active');
    $(itemToShow).delay(500).show("slide", { direction: "left" }, 500);
    $(itemToShow).addClass(itemToShow);
  }

  $('a.italia').click(clickEvent("#italia-view"));
  $('a.europa').click(clickEvent("#europa-view"));
  $('a.emilia').click(clickEvent("#emilia-view"));
}

【讨论】：