Variable in jQuery script?

Question

So I've got a script, when you mouseenter a div, it will load .html file into another div. What I want is to make this script work with many divs. I don't really want to write separate script for each image, instead use variable which base on div name. Let's say i got a div named p3 and when I hover my mouse over, I want the script to load p3.html. Here's the script to show you what I mean:

<script type="text/javascript">
$(document).ready(function () {
    $('#p1').mouseenter(function () {
        $('#description').load('descr/p1.htm');
    });
    $('#p1').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Any tip would be appreciated.

$("img") or use a class $(".mouseoverclass").mouseenter...

Snowburnt
– Snowburnt

2013-10-21 17:24:36 +00:00
Commented Oct 21, 2013 at 17:24 — Snowburnt
– Snowburnt, Commented Oct 21, 2013 at 17:24

Sarcastic · Accepted Answer · 2013-10-21 17:46:36Z

1

You can add a common class to all the images and do it like this:

$document).ready(function () {
    $('.class').mouseenter(function () {
    var id = this.id;
    $('#description').load('descr/' + id + '.htm');
    });
    $('.class').mouseleave(function () {
    $('#description').load('descr/portDefault.htm');
});

edited Oct 21, 2013 at 17:46

answered Oct 21, 2013 at 17:24

Sarcastic

6875 silver badges14 bronze badges

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

Comments

Smeegs · Accepted Answer · 2013-10-21 18:30:05Z

0

I guess it depends on how the divs are being generated. What I would do is set an attribute on the div to denote the target htm page.

Something like

<div data-targetPage='p1.htm' class='hoverImage'>stuff</div>

Then the jquery can look like this

$(document).ready(function () {
    $('.hoverImage').mouseenter(function () {
        $('#description').load($(this).attr('data-targetPage'));
    });
    $('.hoverImage').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Edit: Updated to reflect all the comments.

edited Oct 21, 2013 at 18:30

answered Oct 21, 2013 at 17:24

Smeegs

9,2446 gold badges47 silver badges79 bronze badges

4 Comments

zzzzBov Over a year ago

Custom attributes are OK so long as you're using valid custom [data-*] attributes. Instead of [targetPage] (which is invalid), you should be using [data-target-page], which you could access with $(..).data('targetPage');.

Smeegs Over a year ago

Updated to reflect your comment.

user2660811 Over a year ago

I like your answer, but still I'm gonna have to copy/paste it many times, because there will be many divs like #p1 that will trigger the script, so is there any fix for that? Because I'm not sure if I can use custom attribute for script trigger. @edit Oh, I think I get it, I can use class instead of id on the image.

Smeegs Over a year ago

Great, glad I was able to help

matewka · Accepted Answer · 2013-10-21 17:24:58Z

0

Try this:

$(document).ready(function() {
    $('img').mouseenter(function() {
        $('#description').load('descr/' + this.src.replace('\.png', '') + '.htm');
    });
    $('img').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Yet, I'd recommend adding some class to all images you want refer to, like

<img class="clickableImage" src="...">

and select them with jQuery like this:

$('.clickableImage').mouseenter(...

answered Oct 21, 2013 at 17:24

matewka

10.2k3 gold badges36 silver badges43 bronze badges

Comments

Rafael Oliveira · Accepted Answer · 2013-10-21 17:25:56Z

0

One nice thing you can do is use data-attributes on your images like:

<img class="images"  src="bleh.jpg" data-imagename="image_bleh.jpg" />

and inside your javascript you do:

$('.images').mounseenter(function(){
   $('#description').load('desc/'+$(this).data('imagename'));
});

let me know if you understand it.

answered Oct 21, 2013 at 17:25

Rafael Oliveira

741 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 11:49:25Z

0

Do you want to use objects? Because you say you don't want to write code all over again. Here is how you would make one ( taken from jQuery creating objects) :

    var box = {}; // my object
var boxes =  []; // my array

$('div.test').each(function (index, value) {
    color = $('p', this).attr('color');
    box = {
        _color: color // being _color a property of `box`
    }
    boxes.push(box);
});

I hope this is what you where looking for.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Oct 21, 2013 at 17:29

DLJ

3333 gold badges6 silver badges19 bronze badges

Comments

user1888493 · Accepted Answer · 2013-10-21 17:38:54Z

Similar to what matweka said, I would add a class to all the images you want to allow hovering over and just add a this.attr('id') to select p1, p2, etc

$(document).ready(function() {
    $('.clickImg').mouseenter(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    });
    $('.clickImg').mouseleave(function() {
         $('#description').load('descr/portDefault.htm');
    });
});

also, i would recommend using .hover() instead of both mouseenter and mouseleave

ex:

$(document).ready(function() {
    $('.clickImg').hover(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    }, function() {
         $('#description').load('descr/portDefault.htm');
    });
});

Collectives™ on Stack Overflow

Variable in jQuery script?

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related