编写更短的jquery代码

Question

我正在开展一个项目，我有一个页面可供同事介绍自己和他们的公司。我正在使用带有同事图像的轮播滑块，如果您单击其中一个图像，则其他 DIV 必须显示该人的特定信息，但目前我仅使用不同名称对其进行了测试人。

我已经让它工作了，但是我的代码太长了，所以我的目标是把我的代码写得更短。我正在尝试获取数组的上一个和下一个项目，我在这个问题中找到了它们：get prev and next items in array

这里有我的长版：

var collegaNaamArray = [
    "#naam1",
    "#naam2",
    "#naam3",
    "#naam4",
    "#naam5"];

$(collegaNaamArray.join(", ")).hide();
$(collegaNaamArray[0]).show();

$(collegaNaamArray[0]).animate({
    opacity: 0
}, 0);
$(collegaNaamArray[0]).animate({
    opacity: 1
}, 'slow');

$('#collega1').on('click', function (e) {
    e.preventDefault();
    $(collegaNaamArray.join(", ")).hide();
    $(collegaNaamArray[0]).show();

    $(collegaNaamArray[0]).animate({
        opacity: 0
    }, 0);
    $(collegaNaamArray[0]).animate({
        opacity: 1
    }, 'slow');
});

$('#collega2').on('click', function (e) {
    e.preventDefault();
    $(collegaNaamArray.join(", ")).hide();
    $(collegaNaamArray[1]).show();

    $(collegaNaamArray[1]).animate({
        opacity: 0
    }, 0);
    $(collegaNaamArray[1]).animate({
        opacity: 1
    }, 'slow');
});

$('#collega3').on('click', function (e) {
    e.preventDefault();
    $(collegaNaamArray.join(", ")).hide();
    $(collegaNaamArray[2]).show();

    $(collegaNaamArray[2]).animate({
        opacity: 0
    }, 0);
    $(collegaNaamArray[2]).animate({
        opacity: 1
    }, 'slow');
});

$('#collega4').on('click', function (e) {
    e.preventDefault();
    $(collegaNaamArray.join(", ")).hide();
    $(collegaNaamArray[3]).show();

    $(collegaNaamArray[3]).animate({
        opacity: 0
    }, 0);
    $(collegaNaamArray[3]).animate({
        opacity: 1
    }, 'slow');
});

$('#collega5').on('click', function (e) {
    e.preventDefault();
    $(collegaNaamArray.join(", ")).hide();
    $(collegaNaamArray[4]).show();

    $(collegaNaamArray[4]).animate({
        opacity: 0
    }, 0);
    $(collegaNaamArray[4]).animate({
        opacity: 1
    }, 'slow');
});

http://jsfiddle.net/sxypckn6/1/

$('#collega1').on('click', function(e) {
  e.preventDefault();
  $(collegaNaamArray.join(", ")).hide();
  $(collegaNaamArray[0]).show();

  $(collegaNaamArray[0]).animate({ opacity: 0 }, 0);
  $(collegaNaamArray[0]).animate({ opacity: 1 }, 'slow');
});

这里是我的较短版本，不幸的是还没有工作：

var collegaNaamArray = [
    "#naam1",
    "#naam2",
    "#naam3",
    "#naam4",
    "#naam5"];

$(collegaNaamArray.join(", ")).hide();
$(collegaNaamArray[0]).show();

$(collegaNaamArray[0]).animate({
    opacity: 0
}, 0);
$(collegaNaamArray[0]).animate({
    opacity: 1
}, 'slow');

$(".collegafoto").each(function () {
    var start = '#naam1';
    var prevInfo = collegaNaamArray[($.inArray(start, collegaNaamArray) - 1 + collegaNaamArray.length) % collegaNaamArray.length];
    var nextInfo = collegaNaamArray[($.inArray(start, collegaNaamArray) + 1) % collegaNaamArray.length];

    var prevFoto = $(this).prev();
    var nextFoto = $(this).next();

    $(prevFoto).on('click', function () {
        $(collegaNaamArray.join(", ")).hide();
        $(prevInfo).show();
        $(prevInfo).animate({
            opacity: 0
        }, 0);
        $(prevInfo).animate({
            opacity: 1
        }, 'slow');
    });
    $(nextFoto).on('click', function () {
        $(collegaNaamArray.join(", ")).hide();
        $(nextInfo).show();
        $(nextInfo).animate({
            opacity: 0
        }, 0);
        $(nextInfo).animate({
            opacity: 1
        }, 'slow');
    });
});

http://jsfiddle.net/sxypckn6/

我猜问题出在这部分的某个地方：

var prevFoto = $(this).prev();
var nextFoto = $(this).next();

我知道我没有以正确的方式选择上一张和下一张图片，但我不知道该怎么做。

非常感谢您！

Answer 1

我已将您的实现简化为一个非常简单的函数。实际上，您只需要确定点击图像的索引，以便指定要显示的名称（也基于索引）。当然，如果顺序不同，那么您可能希望使用 HTML5 data- 属性指定目标，而不是依赖索引。此外，您可以利用本机函数 fadeIn() 为不透明度设置动画并同时执行 .show() :)

对于 HTML，我建议使用通用容器包装所有 #naam(n) div，例如 <div class="naam">...</div>，以便基于索引的定位可以工作，即：

<div class="naam">
    <div id="naam1">
        <h1 class="colleganaam">Bas Maassen</h1>
        <h2 class="collegafunctie">web developer</h2>
    </div>
    <!-- more names -->
</div>

那么对于 jQuery 部分，它实际上比你想象的要简单得多：

// Hide all names, show first one
$('.naam > div').hide().eq(0).fadeIn();

// Bind click event
$('#carousel .collegafoto').click(function() {
    // Get the index of the <a> parent, so we know which #
    var i = $(this).closest('a').index();

    // Decide what to do to each name
    $('.naam > div')
        .hide()             // Hide unrelated name
        .eq(i).fadeIn();    // Show related name (based on index)
});

在此处查看概念验证小提琴：http://jsfiddle.net/teddyrised/sxypckn6/2/

---

更新： 或者，您可以将所有这些写入一个函数。更好！

// Declare function
var toggleNames = function(i) {
    if(!i) i=0;
    $('.naam > div').hide().eq(i).fadeIn();
};

// Hide all names, show first one
toggleNames(0);

// Bind click event
$('#carousel .collegafoto').click(function() {
    toggleNames($(this).closest('a').index());
});

见：http://jsfiddle.net/teddyrised/sxypckn6/4/

Answer 2

你可以试试这个：

$('.collegafoto').each(function(index, value){
   $(this).on('click', function(e){
      e.preventDefault();
      $(collegaNaamArray.join(", ")).hide();
      $(collegaNaamArray[index]).show();

      $(collegaNaamArray[index]).animate({
        opacity: 0
      }, 0);
      $(collegaNaamArray[index]).animate({
        opacity: 1
      }, 'slow');
   });
});

DEMO

Answer 3

这是我能做到的绝对最小的：

$("#naam1").fadeIn();    
$('.collegafoto').click(function(e) {
    e.preventDefault();        
    $('div[id^="naam"]').hide();
    $("#naam" + this.id.substr(this.id.length - 1)).fadeIn();
});

Working JSFiddle demo