jQuery Change of classes (not updating)

Question

I'm making a slideshow which uses both classes(Positioning) and IDs(Styling), now when I move an image, Im changing its class; but when mouseenter(class) gets triggered, jQuery is still reading the old html where .pc1 was a certain image but now its another.

Is there a way around this?

I'm trying to use this:

$(document).find('.pccenter').mouseenter(function(){
    if (loading != true) {
        $(this).fadeTo(1000, 1);
        $(this).parent().children('.shinepc').fadeTo(2000, 0.4);
    }
});






var position ="";
var shinepos = "";
$('.pccenter').mouseover(function(){
    position = $(document).find('.pccenter').attr('id');
    shinepos = $(document).find('.shinepc').attr('id');
    console.log(shinepos);
    console.log(position);
    if (loading != true) {
        $('#' + position).fadeTo(1000, 1);
         $('#' + shinepos).fadeTo(2000, 0.4);
    }
});

$('.pccenter').mouseleave(function(){
    position = $(document).find('.pccenter').attr('id');
    shinepos = $(document).find('.shinepc').attr('id');
    if (loading != true) {
        $('#' + position).fadeTo(1000, 0.6);
        $('#' + shinepos).fadeTo(3000, 0.2);
    }
});

Tried using that with:

<div class="pcmidr" id="pcmidr"><div class="shinepcmidr" id="shinepcmidr"></div></div>
<div class="pccenter" id="pccenter"><div class="shinepc" id="shinepc"></div></div>

Now the class "pcmidr" changes to pccenter and pccenter changes to pcmidl.

$(document).find('.pccenter').mouseleave(function(){
    if (loading != true) {
        $(this).fadeTo(1000, 0.6);
        $(this).parent().children('.shinepc').fadeTo(3000, 0.2);
    }
});

loading is not defined , Its console error ? what is the value of loading ?? — Pratik Joshi, Mar 27 '14 at 07:52
Possible duplicate of [Changing an element's ID with jQuery](https://stackoverflow.com/questions/347798/changing-an-elements-id-with-jquery) — Julian Camilleri, Aug 31 '18 at 14:59

Pratik Joshi · Accepted Answer · 2014-03-27T07:33:06.723

0

use mouseover event instead of mouseenter

mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

edited Mar 27 '14 at 07:33

answered Mar 27 '14 at 07:09

Pratik Joshi

11,485
7
41
73

mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element. – Pratik Joshi Mar 27 '14 at 07:32
I think for this to wo rk, I need to get $(document).find('id') and get the class name, and work from there, should work no? – Julian Camilleri Mar 27 '14 at 07:36
Updated the post to contain some of the html – Julian Camilleri Mar 27 '14 at 07:48
that didn't work either pratik.. grrr kind of frustrating when you go mouseover the pcmidl, the pccenter highlights.. instead. – Julian Camilleri Mar 27 '14 at 07:49
loading is not defined , Its console error ? what is the value of loading ?? – Pratik Joshi Mar 27 '14 at 07:53
No errors, now I'm debugging through firebug.. and the console.log(); for the $(document).find to get the exact id name for the class is still retrieving the old html unchanged class names. – Julian Camilleri Mar 27 '14 at 07:55
what I can do which is quite stupdi and old school, put a hidden tag inside the divs to get the new class name. :/ can't believe jQuery doesn't update automatically when changing a classname.. – Julian Camilleri Mar 27 '14 at 07:59

score 0 · Answer 2 · answered Mar 27 '14 at 07:14

0

$(document).find('.pccenter').mouseover(function(){
    if (loading != true) {
        $(this).fadeTo(1000, 1);
        $(this).parent().children('.shinepc').fadeTo(2000, 0.4);
}
});

$(document).find('.pccenter').mouseleave(function(){
    if (loading != true) {
        $(this).fadeTo(1000, 0.6);
        $(this).parent().children('.shinepc').fadeTo(3000, 0.2);
    }
});

answered Mar 27 '14 at 07:14

RemS

272
1
9

with the .parent().children() the shine layer is not fading aswell.. I have to remove it to: $('.shinepc').fadeTo() and with mouseover, the old image is shining instead of the one I'm hovering over. – Julian Camilleri Mar 27 '14 at 07:32
I tried using: $('.pccenter').mouseover(function(){ position = $(document).find('.pccenter').attr('id'); shinepos = $(document).find('.shinepc').attr('id'); console.log(shinepos); console.log(position); if (loading != true) { $('#' + position).fadeTo(1000, 1); $('#' + shinepos).fadeTo(2000, 0.4); } }); but still the image previously set is highlighting.. now that shouldn't be because im getting the current.. id for the class name changed :s – Julian Camilleri Mar 27 '14 at 07:44

jQuery Change of classes (not updating)

2 Answers2