Question

我有一段代码需要检查元素是否与颜色匹配，如果匹配，则更改它。否则，它将设置为默认颜色。

SqlCommand cmd = new SqlCommand(sprocName, conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Phone", paramPhone);
cmd.Parameters.AddWithValue("@AccountNumber",  paramAccount);
cmd.Parameters.AddWithValue("@LeadId", paramLead);
SqlParameter outParam = new SqlParameter();
outParam.ParameterName = "@clean";
outParam.SqlDbType = SqlDbType.Int;
outParam.Direction = ParameterDirection.Output;
cmd.Parameters.Add(outParam);

conn.Open();
cmd.ExecuteNonQuery();
xt = outParam.Value.ToString();

var caps = $("#caps");
if (caps.css('background-color') == "rgb(225, 0, 0)") {
  $('body').on('click', '#caps', function(event) {
    $('.clight').css({
      'background-color': 'red',
      'box-shadow': '0px 0px 20px yellow'
    });
    $('#l2').css({
      'background-color': 'red',
      'box-shadow': '0px 0px 20px yellow'
    });
    event.preventDefault();
  } else {
    $('.clight').css('background-color', 'white');
  });

.caps {
  /* Caps button CSS */
  width: 70px;
  font-size: 12px;
  line-height: 12px;
}

.clight {
  /* Caps button light CSS */
  width: 10px;
  height: 10px;
  top: 10px;
  margin-left: 1px;
  background-color: grey;
  position: relative;
  border-radius: 50%;
}

然而，它不起作用。我所要做的就是在您点击时打开大写锁定灯，如果再次单击它，则将其切换回来，几乎就像切换一样。

Answer 1

注意：注意到您的代码中有一些javascript错误，因为click事件的结束在错误的位置关闭。

没有具体方法可以做这样的事情，因为不同的浏览器对颜色代码有不同的设置，有些使用rgb()一些hex等。

我宁愿建议您创建一些类，然后查找它们，如：

.bg-red{ background-color:red; }

$('body').on('click', '#caps', function(event){
  if ($(this).hasClass('bg-red')) {
      $('.clight, #l2').css({
         'background-color' : 'red',
         'box-shadow' :  '0px 0px 20px yellow'
      });
      event.preventDefault();
  } else {
      $('.clight').css('background-color' , 'white');  
  }
});

Answer 2

我发现解决方案非常简单：

$('body').on('click', '#caps', function(event){
      $('.clight, #l2').toggleClass('on');
});

JavaScript如何检查元素是否是特定颜色？

2 个答案: