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

写jquery代码更短

3 个答案: