为什么jQuery.css（）不适合我？

Question

我一直在努力学习一些代码并且似乎很难让它工作 - 如果这是一个愚蠢的问题，我会道歉，我仍然是JavaScript / jQuery等新手。

我正在尝试构建一个Weather App作为Free Code Camp课程的一部分，并使用simpleWeather.js构建。我现在正试图为页面设置一些动画，使其更具交互性。我有一些代码：

$('#drop').on('click', function() {
  $('.fa-chevron-circle-down').css('transform', 'rotate(180deg)');
});

我相信这应该是一次点击，将图标旋转180度，但无论我尝试什么变化，我似乎无法让它工作。昨天花了几个小时玩它后我决定是时候寻求帮助了！ （我的想法是，一旦它起作用，我将为下面的元素设置动画，这样它们只会在点击按钮时显示。）

我的代码是https://codepen.io/woftis/pen/VjppYM

提前感谢任何人都能给予的帮助。

Answer 1

您的#drop元素已在DOM load之后创建，即动态。因此，您需要 event delegation 。请将您的点击附加到document，然后推荐您的element - #drop。

$(document).on('click','#drop', function() {
  $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});

<强>

的 Updated PEN

更简单一点，因为在#weather期间存在DOM load元素，document的内容可以将其添加到#weather元素。请考虑以下示例。

$('#weather').on('click','#drop', function() {
  $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});

而且我相信，应该180deg进行适当的转变。

<强>

的 Updated PEN 2 with 180deg and #weather

Answer 2

我在使用与OP非常相似的代码的jquery .css函数时遇到问题。

问题

当我单击具有.css ID的按钮时，.dot-one jQuery函数不会更改我的.dot-two或#correct-email类的css。

这是必需的代码示例：

---

$(document).on('click', '#correct-email', function () {
        $('.dot-one').css('background-color', '$white');
        $('.dot-two').css('background-color', '$gray-darker');
        ...
      });

---

.dot-one {
  background-color: $gray-darker;
}

.dot-two {
  background-color: $white;
}

---

解决方案

$(document).on('click', '#correct-email', function () {
        $('.dot-one').css('background-color', '#fff');
        $('.dot-two').css('background-color', '#222');
        ...
      });

显然，jquery不喜欢将变量SASS变量传递到.css函数中。我在文档的任何地方都找不到。我的假设是，它能够基于SASS变量来计算新值。但是似乎所有这些东西都是由sass预处理的，而不是可供CSS使用的。

根据SASS documentation，这听起来像是正在发生。