Question

我正在开发一个小部件，为此我使用的是jquery的addClass和removeClass方法，但有些它不起作用请帮我解决这个问题。

以下是代码：

＆＃13;

$('#test').click(function() {
  $(this).addClass('second');
  console.log("hello");
}, function() {
  $(this).removeClass('second');
});

＆＃13;

   #test {
     transition: all 0.5s ease;
   }
   .first {
     width: 150px;
     height: 30px;
     position: fixed;
     bottom: 0px;
     right: 25px;
   }
   #prop {
     width: 150px;
     height: 30px;
     position: fixed;
     bottom: 0px;
     right: 25px;
     background-color: #abc322;
     color: white;
     text-align: center;
   }
   .second {
     width: 150px;
     height: 300px;
     position: fixed;
     bottom: 0px;
     right: 25px;
     box-shadow: 3px 4px 40px grey;
   }

＆＃13;

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="test" class="first">
  <div id="prop">
    freight Calculator
  </div>
  <p>
    welcome to freight calculator
  </p>
</div>

＆＃13;

当我点击div时，它应该改变它的类并开始转换，但它不起作用。请找出我所犯的错误。

感谢您的时间。

Answer 1

click方法只接受一个回调函数：点击时应触发的函数。您提供了两个回调（一个添加类，一个删除它）。 jQuery不知道如何处理它，它假设第一个回调是一个eventData对象，并将第二个函数作为在click上执行的动作。这意味着在点击时，它所做的就是删除该类。

请参阅https://api.jquery.com/click/，详细了解如何使用click()方法。

如果您只提供一个回调，它可以正常工作：https://jsfiddle.net/uqmupq3h/

Answer 2

.click()方法只需要一个回调函数，因此您应该使用.toggleClass()而不是.addClass()和.removeClass()。

$('#test').click(function(){
  $(this).toggleClass('second');
})

https://jsfiddle.net/knj0ec6n/

Answer 3

jQuery .click()将一个函数作为事件侦听器。您可以改为使用.toggleClass()。

$('#prop').click(function(e) {
  e.preventDefault();
  $('#test').toggleClass('second');
});

#test {
  transition : all 0.5s ease;
}
.first {
  width: 150px;
  height: 30px;
  position: fixed;
  bottom: 0px;
  right: 25px;
}
#prop {
  cursor: pointer;
  width: 150px;
  height: 30px;
  position: fixed;
  bottom: 0px;
  right: 25px;
  background-color: #abc322;
  color: white;
  text-align: center;
}
.second {
  width: 150px;
  height: 300px;
  position: fixed;
  bottom: 0px;
  right: 25px;
  box-shadow: 3px 4px 40px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" class="first">
  <div id="prop">
    freight Calculator
  </div>
  <p>
    welcome to freight calculator
  </p>
</div>

如何使用onclick on div开始转换？

3 个答案: