问题描述:

I am working on a project where I have a page where colleagues tell about themselves and their company. I'm using a carousel slider with images of the colleagues, and if you click one of the images, other DIV's have to show up with the information specific to that person, but for now I've only tested it with the different names of the persons.

I've had it working, but my code got verrrrry long, so my goal is to write my code a lot shorter. I am trying to get the prev and next items of the array, which I found in this question: get prev and next items in array

Here I have my long version:

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');

});

And here my shorter version which unfortunately isn't working yet:

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/

I'm guessing the problem is somewhere in this part:

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

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

I know I'm not selecting the previous and next picture in the right way, but I wouldn't know how else I should do it.

Thank you very much in advance!

网友答案:

I have simplified your implementation into a very simple function. Actually, all you need is to determine the index of the clicked image, so as to dictate which names (based on index, too) you want to show. Of course, if the ordering is different then you might want to specify the target using HTML5 data- attributes instead of relying on index. Also, you can take advantage of the native functions fadeIn() to animate opacity and perform .show() at the same time :)

For the HTML, I would recommend wrapping all the #naam(n) divs with a general container, say <div class="naam">...</div> so that index-based targetting will work, i.e.:

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

Then for the jQuery part, it's actually a lot simpler than you think:

// 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)
});

See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/sxypckn6/2/


Update: Alternatively, you can write all of this into a function. Even better!

// 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());
});

See: http://jsfiddle.net/teddyrised/sxypckn6/4/

网友答案:

You can try this:

$('.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

网友答案:

This was the absolute smallest I could get it to:

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

Working JSFiddle demo

相关阅读:
Top