Есть ли способ получить значение свойства CSS, которое было динамически обновлено с помощью jQuery? Например, div может начинаться с 0 непрозрачности. При каждом наведении к div будет добавляться больше непрозрачности, поэтому захват непрозрачности через jQuery позволит получить исходную непрозрачность при первом наведении и новую непрозрачность при каждом дополнительном наведении.

В jsfiddle я работаю, создав новое свойство данных, но вместо этого я хочу получить обновленные свойства. В примере, где я получаю свойство Opacity, вы можете видеть, что после 2-х наведений курсора переменная больше не обновляется должным образом.

(https://jsfiddle.net/nvr6qx3k/4/)

$(".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>
0
randyturtle 24 Апр 2017 в 04:41

2 ответа

Лучший ответ

Значения непрозрачности 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>
0
Louys Patrice Bessette 24 Апр 2017 в 02:15

Привет, я думаю, что вы должны начать с непрозрачности 0,2, потому что максимальное значение непрозрачности CSS равно 1. Может быть, добавьте 0,2 каждую мышь над. вместо parstInt используйте parseFloat, потому что parseInt может просто вернуть 0 из (0.5), поэтому вы не можете получить значение текущей непрозрачности.

Проверь это:

$(".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);
  
});
.box {
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: .2;
}
<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>
0
Robert Anthony S. Tribiana 24 Апр 2017 в 02:24