如何在我的代码中添加 if else 语句？

Question

我正在尝试将 if/else 语句添加到此代码中，其中已单击切换按钮以便能够再次单击它并更改为另一种颜色

HTML

<a class="reme" href="#"><i class="far fa-circle"></i> Remember Me</a>

JQUERY

$(".reme").click(function(){
$(this).css("color", "#1ABC9C");
$(this).find('i').toggleClass('far fa-cirle fas fa-circle');
});

Answer 1

您可以为 CSS 添加样式，然后为按钮本身添加 toggleClass - 如下所示。

如果您还想要其他东西，请告诉我。

我还在下面添加了一个 if 版本，但建议不要使用它。

演示

// Click event
$(".reme").click(function() { 

  // Toggle class on the button
  $(this).toggleClass("green-text");

  // Unchanged
  $(this).find('i').toggleClass('far fa-cirle fas fa-circle');

});

.green-text {
  color: #1ABC9C;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="reme">Toggle</button>

备选

如果愿意，您可以使用 if 语句，并检查 color 的内联 .css 值...但这绝对不是最好的方法这个。对于这个特定的用例，切换类会好得多。

// Click event
$(".reme").click(function() {

 // Check if the color is set inline to the rgb version of your color - as when changed this way it enters the hex as rgb 
 if ( $(this).css("color") == "rgb(26, 188, 156)")  {
    
    // Make it black if it is
    $(this).css("color", "black");
    
  } else {
  
    // Set it as green if not
    $(this).css("color", "#1ABC9C");
    
  }
  
  $(this).find('i').toggleClass('far fa-cirle fas fa-circle');
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="reme">Toggle</button>

如何在我的代码中添加 if else 语句？

How to add an if else statement in my code?

javascript

jquery

font-awesome-5

演示

备选