Simpler Javascript for multiple HTML content

Question

I must start with I am quite a javascript novice.

Currently I am making a website where a whole bunch of items are listed. Each item has a default image and 3 images of different angles of the product. I am using JQuery to show a full sized image over the default when the user hovers over the thumbnail.

My question, I have about 90 items. Is there an easier way to do this only in javascript, without having to nest 90 items.

It must be only HTML / CSS / Javascript

Currently for 3 items it would like this :

$(document).ready(function(){

// First thumbnail on each item
  $("#thumb1-1,#thumb2-1,#thumb3-1").hover(function(){
    $("#image1-1,#image2-1,#image3-1").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-1,#image2-1,#image3-1").hide();$("#default1,#default2,#default3").show();
  });

// Second thumbnail on each item
  $("#thumb1-2,#thumb2-2,#thumb3-2").hover(function(){
    $("#image1-2,#image2-2,#image3-2").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-2,#image2-2,#image3-2").hide();$("#default1,#default2,#default3").show();
  });

// Third thumbnail on each item

  $("#thumb1-3,#thumb2-3,#thumb3-3").hover(function(){
    $("#image1-3,#image2-3,#image3-3").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-3,#image2-3,#image3-3").hide();$("#default1,#default2,#default3").show();
  });

});

Rough visual Most likely will load images at the end of the page to reduce lag, also pages will be split up to about 10 on a page

You can use an iterator to construct the ids dynamically. Something like for(i = 1; i < itemCount; i++){ //$("#thumb" + i +"-1,#thumb" + i + "-2,#thumb" + i + "-3").hover(function() {...} } Here's a doc on the javascript For loop. w3schools.com/js/js_loop_for.asp — Mic
– Mic, Commented Jan 21, 2015 at 19:57
I will look into that. Could you give me an example from how the first units IDs would count to the second then third? — David
– David, Commented Jan 21, 2015 at 19:59
Note that in my example above, itemCount would be a variable that was set outside the loop. I'm presuming that it could be dynamic, but if it's always a known number you could hardcode it, "i < 90" for example. — Mic
– Mic, Commented Jan 21, 2015 at 20:00
it will be better if your content is generated by server side such as php instead of javascript. — aahhaa
– aahhaa, Commented Jan 21, 2015 at 20:04
It looks like it should actually be the reverse of what I did in my initial example. If you know it always going to be 1-i, 2-i, 3-i then just hardcode that part. I've built it here in a fiddle (obviously without the markup it won't work). jsfiddle.net/tbkLua3z — Mic
– Mic, Commented Jan 21, 2015 at 20:05

aahhaa · Accepted Answer · 2015-01-21 20:35:21Z

1

http://jsfiddle.net/8k5L5myo/2/

var totalImageTypeCount = 10;
var defaultImageCount = 1;
var thumbImageCount = 3;
var overlayImageCount = 2;
var wrapper = $(".wrapper");
var defaultTag = '<div class=".defaultTag"> this is default';
var overlayTag = '<div class=".overlayTag"> this is oeverlay';
var thumbTag = '<div class=".thumbTag"> this is Thumbnail';
var closeTag = "</div>";

for (var a = 0; a < totalImageTypeCount; a++) {
    wrapper.append(defaultTag);

    for (var b = 0; b < overlayImageCount; b++) {

        wrapper.append(overlayTag);
        wrapper.append(closeTag);
    }

    for (var c = 0; c < thumbImageCount; c++) {
                    wrapper.append(thumbTag);
                    wrapper.append(closeTag);
        }
    wrapper.append(closeTag);

}

use for loop to loop through all the image to you need, you can use src=-"dir/yourImage"+a+".jpg" where a will loop though 1-max number.

edited Jan 21, 2015 at 20:35

answered Jan 21, 2015 at 20:29

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ozan · Accepted Answer · 2015-01-21 20:04:13Z

0

If I understood your situation right, this should work.

$(document).on("mouseenter", "[id^=thumb]", function(e) {
  $(this).show();
  var itemno = $(this).attr("id").replace("thumb","").replace("/-\d+/","");
  $("#default"+itemno).hide();
});
$(document).on("mouseleave", "[id^=thumb]", function(e) {
  $(this).hide();
  var itemno = $(this).attr("id").replace("thumb","").replace("/-\d+/","");
  $("#default"+itemno).show();
});

answered Jan 21, 2015 at 20:04

Ozan

3,7492 gold badges21 silver badges23 bronze badges

2 Comments

David Over a year ago

I honestly have no idea what any of that means.

Ozan Over a year ago

It is a piece of code that handles the hover (which is just a shorthand for mouseenter and mouseleave events) of all thumbs instead of binding them to all your elements seperately.

Collectives™ on Stack Overflow

Simpler Javascript for multiple HTML content

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related