ansaurus

Question

jQuery: Selector inconsistencies, can someone please explain what i'm doing wrong here

Answer 1

A:

I used Chrome's Developer Tools to test your code, and the class is getting added correctly. That makes me think there is a problem with your css class definitions. What do those look like? It worked fully when I tested it with this css:

.vpLeftText_Selected {color:#0f0;}

rosscj2533 2010-07-29 17:28:14

Could it have something to do with the fact that i have a hover() function (which changes the css via .css() but not via removeClass().addClass()?I mean, that's the thing actually, the css change works, just not the removeClass().addClass(), so that probably doesn't effect it.

RGBK 2010-07-29 17:35:20

We're getting somewhere.Hover() is clashing with click()

RGBK 2010-07-29 17:46:03

@RGBK - I wouldn't think the `hover` function would have an effect. Your posted html doesn't have a `cat_rollout` div, so my test did not include that. Using Chrome's Developer Tools I could see the `removeClass` and `addClass` are working, that why I want to know what your css class definitions for `vpLeft_Selected` and `vpLeftText_Selected` look like. Can you post those?

rosscj2533 2010-07-29 17:48:21

@RGBK - I posted my last comment before I saw your second one. Nice find, it looks like the classes added with hover are clashing with the ones added with click. I'll test using the hover code.

rosscj2533 2010-07-29 17:52:27

Is it just me or is jQuery really weird sometimes. I've been fiddling with code for years but I'm no pro, but after years of messing around with code I'm pretty sure that in terms of targeting objects jQuery doesn't play in a very straightforward way, compared to say php.

RGBK 2010-07-29 18:02:05

@RGBK - I've worked with jQuery for a while now, and it took me a while to fully get the jQuery object idea. I'm not too familiar with php, but at this point jQuery does seem to do things in a straightforward way. You'll probably get see things clearer with some more experience. :)

rosscj2533 2010-07-29 18:16:05

Might help to add that if I add some other .removeClass().addClass() functions within that same click() function that aren't related to $(this), they execute just fine.So it must have something to do with the fact that it's hovering with $(this) but then you click with another $(this)? How do you get around that?

RGBK 2010-07-29 18:19:01

@rosscj2533 Can't wait to get over the object idea cos the rest is just amazing.

RGBK 2010-07-29 18:20:23

Answer 2

A:

It turns out that the hover function is clashing with the click. But actually only with the removeClass().addClass() lines(?) The .css() part works.

How can I get around this elegantly?

    $('.vpMedia').hover(function() {
    $(this).find(".vpLeft").css("opacity" , "0.2");
    $(this).find(".vpLeftText").css("color" , "#00cc00");
    },
    function() { //mouseout
    $(this).find(".vpLeft").css("opacity" , "0");
    $(this).find(".vpLeftText").css("color" , "#aaa");
});

$('.vpMedia').click(function() {

    var selectedBT1 = $(this).find(".vpLeft");
    selectedBT1.removeClass();
    selectedBT1.addClass("vpLeft_Selected"); //if i remove the hover function above, this works.

    var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected");//if i remove the hover function above, this works.

    $(this).find(".vpArrow").css("visibility", "visible");//but this works regardless?!
});

RGBK 2010-07-29 17:47:53

In the original code you were using, were you trying to add classes to the `vpLeft` and `vpLeftText` divs during the hover function?

rosscj2533 2010-07-29 18:12:56

Yes exactly, hovering over vpMedia removes vpLeft and vpLeftText classes from 2 divs and replaces them with new ones (but only while hovering, soon as you go out they are returned to their original class states via the same method. Is that a nono?

RGBK 2010-07-29 18:22:50

It looks like this code is pretty much working. Because you are using `css` in the hover, those styles will take precedence over any classes you add, so if a style you are looking for in `vpLeft_Selected` is set by a `.css` call, it won't be there. What are you styles are you missing onclick?

rosscj2533 2010-07-29 18:28:35

@RGBK - using hover to add and remove classes as you are trying to is a very common occurrence. This code is different from your original because it is using `.css` in the hover instead of adding/removing classes. It would be better to use classes if you can get it to work that way.

rosscj2533 2010-07-29 18:32:33

That worked. Hmm, so obvious once you've figured it out!Thanks for your help.

RGBK 2010-07-30 11:04:55

ansaurus

tags:

views:

answers:

jQuery: Selector inconsistencies, can someone please explain what i'm doing wrong here

related questions