Question

有没有办法提取使用jQuery动态更新的CSS属性的值？例如，div可以以0不透明度开始。在每次悬停时，div会添加更多不透明度，因此通过jQuery获取不透明度会在第一次悬停时获取原始不透明度，并在每次额外悬停时获得新的不透明度。

在jsfiddle中，我通过创建一个新的数据属性来工作，但我想提取更新的属性。在我获取Opacity属性的示例中，您可以看到在2次悬停后，变量不再正确更新。

$(".row").on("mouseover", "div", function() {

	var opacity = parseInt($(this).css("opacity")) || 0;
  opacity = opacity + 1;
 	$(this).css("opacity", opacity);
  console.log("opacity is " + opacity);
  
  var count = parseInt($(this).data('click')) || 0;
  count = count + 1;
  $(this).data("click", count);
  console.log("count is: " + count);
  
});

.box {
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: .5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Answer 1

CSS不透明度值从0到1 1蜜蜂100％

所以不透明度= 2没有意义。

在鼠标悬停时，你应该加0.1 ......你会看到效果另外...... parseInt()返回一个整数...

因此，使用parseFloat可以更好地检索浮动数字 ;）

var opacity;

$(".row").on("mouseover", "div", function() {

  opacity = parseFloat($(this).css("opacity")) || 0;
  opacity = opacity + 0.1;
  $(this).css("opacity", opacity);
  console.log("opacity is " + opacity);
  
  var count = parseInt($(this).data('click')) || 0;
  count = count + 1;
  $(this).data("click", count);
  console.log("count is: " + count);
  
});

.box {
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: .5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Answer 2

嗨我认为你应该开始0.2不透明度，因为css opacity max value是1.也许每只鼠标加0.2。而不是parstInt使用parseFloat，因为parseInt只能返回0（0）的0，这就是为什么你不能得到当前不透明度的值。

检查一下：

＆＃13;

$(".row").on("mouseover", "div", function() {

	var opacity = parseFloat($(this).css("opacity")) || 0;
  opacity = opacity + 0.2;
 	$(this).css("opacity", opacity); 
  
  var count = parseFloat($(this).data('click')) || 0;
  count = count + 1;
  $(this).data("click", count);
  console.log("count is: " + count);
  
});

＆＃13;

.box {
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: .2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

＆＃13;

抓取更新的CSS属性值

2 个答案: