时间戳

首页 > 解决方案 > 如何在我的代码中添加 if else 语句？

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

问题描述

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

HTML

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

查询

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

标签： javascriptjqueryfont-awesome-5

解决方案

您可以为 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语句，并检查 ... 的内联.css值，color但这绝对不是最好的方法。对于这个特定的用例，切换类会更好。

// 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>

推荐阅读