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 Oct 21 '13 at 17:24 — Snowburnt, Oct 21 '13 at 17:24

Sarcastic · Answer 1 · 2013-10-21T17:46:36.150

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 '13 at 17:46

answered Oct 21 '13 at 17:24

Sarcastic

677
5
14

Smeegs · Accepted Answer · 2013-10-21T18:30:05.407

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 '13 at 18:30

answered Oct 21 '13 at 17:24

Smeegs

9,151
5
42
78

1

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');`. – zzzzBov Oct 21 '13 at 17:25
Updated to reflect your comment. – Smeegs Oct 21 '13 at 17:26
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. – user2660811 Oct 21 '13 at 17:49
Great, glad I was able to help – Smeegs Oct 21 '13 at 18:16

score 0 · Answer 3 · answered Oct 21 '13 at 17:24

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

score 0 · Answer 4 · answered Oct 21 '13 at 17:25

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.

score 0 · Answer 5 · edited May 23 '17 at 11:49

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.

score 0 · Answer 6 · answered Oct 21 '13 at 17:38

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

Variable in jQuery script?

6 Answers6