JavaScript - removeClass 不起作用？

Question

我有一个 jssor 画廊，我通过添加一个 CSS 类“模糊”来模糊它。当用户点击 div 时，我想“取消模糊”这个画廊。为此，我添加了这个简单的 JS 代码：

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

其中“js1”是我的 div 的 id，“jssor_1”是我的画廊的 id。不幸的是，这根本不起作用。我是 JS 新手，但我认为这应该可以正常工作，因为单击功能会检查是否单击了 HTML 元素...这是我的画廊的 HTML 代码：

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

Answer 1

JQuery 选择器
JQuery 选择器是一种选择文档对象模型 (DOM) 元素的方法，即 HTML 元素，如 div、button .. 等

'*'

$("*")  //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"

元素

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

el1,el2,el3

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

你的情况

你使用了不正确的选择器，你需要使用

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

Answer 2

您没有正确使用selector，要通过ID选择元素，您需要使用#，而按类选择使用.，也不需要$。

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

Answer 3

您需要放置带有正确标识的选择器。当你想让 jQuery 使用它的 id 访问元素时，请使用“#”和类“。”但是您都不使用它们。因此，当您尝试使用它的 id 访问元素时，解决方案很简单，只需添加“#”即可。请检查以下更正的代码。

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

或者你可以直接在ready事件中使用$。

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

希望对你有帮助。

Answer 4

如下修改脚本

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

如果你在 jquery 中使用 id 所以你需要添加 $('# >').