Question

这是我开始使用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

Answer 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/

Answer 2

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

DEMO： 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>

Answer 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"));
}

如何简化jQuery代码

3 个答案: