use jQuery to hide div with if statement and addClass

Question

I have a div generated through a plugin that I want to hide when disabled=true. After reading through the posts on SO, I thought maybe I could use .attr to find the disabled=true and then addClass to hide it with CSS display: none. I can't edit the plug-in or source code, so I'm hoping I can do this from the front end through our CMS. I'm a jQuery beginner so maybe this isn't possible?

I want to hide the disabled arrows in the carousel at the bottom of this page. The HTML looks like this after it is generated by the plugin:

        <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div>

and I have added this code to the CMS but it's not working. I don't see any errors in the console; is this the right approach? Is there something wrong with my syntax?

        if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled', true)){
            $(this).addClass("arrow");
        }

Thanks in advance for any help.

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

The :disabled selector won't work with any element but a form field. It is perhaps a bit non-standard to be using it on anything but forms; it is even more non-standard to use the value of "true," which should instead also be "disabled" (see Correct value for disabled attribute). So instead of using :disabled, your code as written would need to use the selector [disabled="true"].

Your selector probably doesn't need to use the entire list of classes -- the last class on the list is probably all you need to target.

However, I would simply use CSS for what you are trying to do. Instead of having the arrow class in your stylesheet, replace it with .jcarousel-prev-disabled-horizontal.

If you still wanted to go the "disabled" route though with JavaScript, use the following, which will also replace the need for an if-statement:

$('.jcarousel-prev-disabled-horizontal[disabled="true"]').addClass('arrow');

edited May 23 '17 at 10:32

Community

1
1

answered Apr 05 '13 at 15:25

Donald T

10,234
17
63
91

this worked when i tried it locally but when i plugged it into the CMS, the class isn't applied to the div. – surfbird0713 Apr 05 '13 at 15:36
The JavaScript line works for me if I enter it in the browser's console. But it looks like you have other JavaScript errors, so it's possible that it is not executing for that reason if your adding the line to your file and reloading the page. – Donald T Apr 05 '13 at 15:37
And, of course, this needs to go inside a $(document).ready() function. – Donald T Apr 05 '13 at 15:39
Yes, it is inside a $(document).ready() function...I can't fix those other script errors though so maybe this is an impossible task for now. Marking your answer as correct anyway since it works locally. This isn't the first time I've run into issues trying to execute scripts on this site. – surfbird0713 Apr 05 '13 at 15:44

score 0 · Answer 2 · answered Apr 05 '13 at 15:15

0

Your if() statement is actually setting the property for the div element, not checking its status. You should update your code as follows:

if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled'))
{
            $(this).addClass("arrow");
}

answered Apr 05 '13 at 15:15

BenM

52,573
26
113
168

thanks for pointing this out. The div will have the disabled attribute either way, so I have to check to see if it is true or false before I apply the class. I only want to class applied if it's true. – surfbird0713 Apr 05 '13 at 15:32

Eli · Answer 3 · 2013-04-05T15:21:23.777

0

You need to compare not assign the value:

if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled')) {
    $(this).addClass("arrow");
}

edited Apr 05 '13 at 15:21

answered Apr 05 '13 at 15:16

Eli

14,779
5
59
77

Attributes are always strings, so in this case the if condition will always be true unless it is an empty string. This could cause weird results. – Kevin B Apr 05 '13 at 15:34

score 0 · Answer 4 · answered Apr 05 '13 at 15:16

0

Yes you're actually just setting the disabled attribute

you need to check that the element was disabled

.is(':disabled')

answered Apr 05 '13 at 15:16

Stephen Binns

765
10
17

score 0 · Answer 5 · answered Apr 05 '13 at 15:17

0

Try this,

$(document).ready(function(){
    if ($('.div.jcarousel-prev .jcarousel-prev-horizontal .jcarousel-prev-disabled .jcarousel-prev-disabled-horizontal').is(':disabled')){
        $(this).addClass("arrow");
    }
   });

answered Apr 05 '13 at 15:17

Amit

15,217
8
46
68

also, adding a class may not work because there is an inline style applying `display:block` – Rob Allen Apr 05 '13 at 15:18
@roballen, even if the style doesn't work, i should still see arrow being added to the list of classes when my script is working, shouldn't i? – surfbird0713 Apr 05 '13 at 15:29
Yes, you should see the class added to the class list. If you aren't then one of three things are happening: 1) your targeting rule is wrong. Test this by entering your targeting rule (the $('.div....) bit) into Firebug once your page is loaded. If you get an object back in the console that looks right, then you are set. 2) You're running your script before the objects are created. Test this by putting your script in your footer right before the `
` tag and see what happens. 3) Your code is running at the same time as something else and is getting overridden. See #2 for fixing it.
– Rob Allen Apr 05 '13 at 15:55

use jQuery to hide div with if statement and addClass

5 Answers5