JavaScript - removeClass not working?

Question

I've got a jssor gallery which I blurred by adding a CSS class "blur". I'd like to "unblur" this gallery when user clicks on div. To do this I added this simple JS code:

    jQuery(document).ready(function($) {
      $("js1").click(function(){
        $("jssor_1").removeClass("blur");
      });
    });

where "js1" is my div's id and "jssor_1" is my gallery's id. Unfortunately, this doesn't work at all. I'm new to JS, but I thought this should work fine as click function checks whether an HTML element was clicked... Here's my HTML code for the gallery:

  <div id="gallery" class="section gallery-section">
    <div class="container-fluid">
      <div id="jssor_1" class="blur" style="top: 0px; left: 0px; width: 800px; height: 445px; overflow: hidden; visibility: hidden; background-color: #000;">
        <div data-u="slides" style="cursor: default; top: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
          <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/realizacje/01.jpg" />
            <img data-u="thumb" src="img/realizacje/01t.jpg" />
          </div>
          ...other gallery images...
        </div>
        <div data-u="thumbnavigator" class="jssort01" data-autocenter="1">
          <div data-u="slides" style="cursor: default;">
            <div data-u="prototype" class="p">
              <div class="w">
                <div data-u="thumbnailtemplate" class="t"></div>
              </div>
              <div class="c"></div>
            </div>
          </div>
        </div>
        <span data-u="arrowleft" class="jssora05l" style="top: 158px; left: 8px; width: 40px; height: 40px;"></span>
        <span data-u="arrowright" class="jssora05r" style="top: 158px; right: 8px; width: 40px; height: 40px;"></span>
      </div>
      <div id="js1" class="naglowekgalerii">PRZYKŁADOWE REALIZACJE</div>
    </div>
  </div>

CSS:

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.naglowekgalerii {
  font-family: 'Bitter', serif;
  font-size: 28px;
  color: white;
  background: none;
  padding-left: 24px;
  padding-top: 18px;
  padding-bottom: 8px;
  margin: 0 auto;
  text-transform: uppercase;
  text-shadow: 1px 1px black;
  position: absolute;
  top: 50%;
  left: 50%;
}

.naglowekgalerii:hover {
  cursor:pointer;
}

.jssora05l, .jssora05r {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url('../img/a17.png') no-repeat;
  overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

.jssort01 {
  position: absolute;
  left: 0px;
  width: 760px;
  height: 45px;
}

.jssort01 .p {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 45px;
}

.jssort01 .t {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.jssort01 .w {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.jssort01 .c {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 45px;
}

.jssort01 .pav .c {
  top: 0px;
  _top: 0px;
  left: 0px;
  _left: 0px;
  width: 60px;
  height: 45px;
  background: rgba(255,255,255,0.8);
  transition: all .3s;
}

.jssort01 .p:hover .c {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 45px;
  background: rgba(255,255,255,0.8);
  transition: all .3s;
}

.jssort01 .p.pdn .c {
  width: 60px;
  height: 45px;
  background: rgba(255,255,255,0.8);
  transition: all .3s;
}

you need add proper selector in jquery like in case id so $("#js1").click(function(){ — Pragnesh Khalas, Mar 05 '16 at 09:06

Peter Wilson · Accepted Answer · 2016-03-05T14:01:47.880

2

JQuery Selectors
the JQuery selectors is a way to select the document object model (DOM) elements i.e HTML elements like div, button .. etc

' * '

$("*")  //All elements

#id

$("#lastname")  //The element with id="lastname"

.class

$(".intro") //All elements with class="intro"

.class,.class

$(".intro,.demo")   //All elements with the class "intro" or "demo"

element

$("p")   //All <p> elements

el1,el2,el3

$("h1,div,p")   //All <h1>, <div> and <p> elements

In your case

You are using incorrect selectors you need to use

jQuery(document).ready(function() {
  $("#js1").click(function(){
    $("#jssor_1").removeClass("blur");
  });
});

edited Mar 05 '16 at 14:01

answered Mar 05 '16 at 09:06

Peter Wilson

4,150
3
35
62

This doesn't work either. If I understand correctly, when I remove "blur" class the gallery should not be blurred anymore, right? Right now it's blurred at 3px, so when I remove "blur" class it... Well, it just shouldn't be blurred. – mentor93 Mar 05 '16 at 09:09
1

@mentor93 this issue is `$('jssor_1')` means that there is a tag element named `jssor_1` and the same for `js1` which is not correct those are ids for a html elements change you selector first then check if there is any other problems – Peter Wilson Mar 05 '16 at 09:12
Sorry, but I don't really understand that. As I said I'm new to JS. Could you explain what you mean more precisely? If I have a blurred gallery how should I unblurred it when clicking on a div element? – mentor93 Mar 05 '16 at 09:16
@mentor93 this something called jQuery DOM selectors i.e select html elements to apply a certain function on it I will explain it on an edit to my answer – Peter Wilson Mar 05 '16 at 09:20
OK, I get it, but still this doesn't work for me. When I click on div ("#js1"), the gallery ("#jssor_1") is still blurred, while it (I think so) should unblur. Perhaps I'm doing something wrong in HTML? – mentor93 Mar 05 '16 at 09:36
@mentor93 I am checking it for you – Peter Wilson Mar 05 '16 at 09:37
Seems that this removeClass function doesn't work... When I changed it to addClass("blur") it all works - when I click on div gallery blurs. Why isn't it working the other way, why isn't it unbluring the gallery? – mentor93 Mar 05 '16 at 09:38
@mentor93 No I checked it and it removed the class , could you please post your CSS ? – Peter Wilson Mar 05 '16 at 09:42
@mentor93 check this fiddle https://jsfiddle.net/g5qcqLmL/ Is this you result now ? – Peter Wilson Mar 05 '16 at 09:56
Yes, although I've got a gallery here - images and thumbnails which are all blurred. What I'd like to do is when I click on div "PRZYKŁADOWE REALIZACJE" all those images and thumbnails unblur. – mentor93 Mar 05 '16 at 10:02
@mentor93 I can't see any images or elements except for "PRZYKŁADOWE REALIZACJE" only! the structure now and what I can see is not helping me to debug your issue please try to update it – Peter Wilson Mar 05 '16 at 10:07
Thank you for your help, but this would take too much time for me to update jsfiddle. I'll try to figure something out, thank you. – mentor93 Mar 05 '16 at 10:15
@mentor93 Good luck and I am available for any questions – Peter Wilson Mar 05 '16 at 10:16
Thank you for all your kindness and help :) I managed to solve it, by adding "blur" class directly in jQuery: $("#jssor_4").addClass("blur"); instead of adding it in html. – mentor93 Mar 05 '16 at 10:21
@mentor93 Wow! great :) – Peter Wilson Mar 05 '16 at 10:25

score 1 · Answer 2 · edited Mar 05 '16 at 09:10

1

you have not used the selector properly,To select an element by ID you need to use # and to select by class use . also $ is not needed.

 jQuery(document).ready(function() {
  $("#js1").click(function(){
    $("#jssor_1").removeClass("blur");
  });
});

edited Mar 05 '16 at 09:10

Niklesh Raut

34,013
16
75
109

answered Mar 05 '16 at 09:05

shu

1,938
10
19

score 1 · Answer 3 · answered Mar 05 '16 at 09:17

You need to put selector with the proper identification. When you want to let jQuery access an element with it's id then use "#" and for class "." however you use neither of them. So, solution is simple to put "#" as you're trying to access an element with it's id. Kindly check below corrected code.

jQuery(document).ready(function($) {
      $("#js1").click(function(){
        $("#jssor_1").removeClass("blur");
      });
    });

Or you can use $ directly in ready event.

$(document).ready(function() {
      $("js1").click(function(){
        $("jssor_1").removeClass("blur");
      });
    });

Hope it'll help you.

score 0 · Answer 4 · answered Mar 05 '16 at 09:08

Change script as per below

<script type="text/javascript">
  jQuery(document).ready(function ($) {
      $("#js1").click(function () {
          $("#jssor_1").removeClass("blur");
      });
  });
</script>

In case of you use id in jquery so you need to add $('# << id >>').

JavaScript - removeClass not working?

4 Answers4

Linked