Question

我有一个div，它根据我在WP中创建的自定义帖子类型中添加的单词显示状态，我想根据DIV的内容文本添加.class，我发现{{3} }会更改样式（背景颜色），但是我想知道是否可以更改.class而不是像示例中那样仅更改样式属性来更改背景属性。

下面是示例代码：

    $(function() {
    //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    $('.image-container>.status-tag').each(function(){
        console.log($(this).text());
      var text = $(this).text().toLowerCase();
        switch (text) {
        case 'diesel':
        color = '#ff0000';
        break;
        case 'auto':
        color = '#6dc8bf';
        break;
        default:
        color = '#39d52d';
        }
        $(this).css('background', color);
    });
});

HTML

<!DOCTYPE html>
<body>
 <div class="image-container">
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

默认情况下，“状态”一词包括此类“ pt-cv-ctf-value”，所以我想应该将其与该类一起添加。

这是我找到的最接近的解决方案，但不知道如何针对我的情况实施。

谢谢！

Answer 1

您可以使用addClass在您的元素上添加类。尝试下面的代码

$(function() {
  //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
  $('.image-container>.status-tag').each(function() {
    console.log($(this).text());
    var text = $(this).text().toLowerCase();
    switch (text) {
      case 'diesel':
        className = 'diesel-color';
        break;
      case 'auto':
        className = 'auto-color';
        break;
      default:
        className = 'default-color';
    }
    $(this).addClass(className);
  });
});

.diesel-color{
  background-color: #ff0000;
}

.auto-color{
  background-color: #6dc8bf;
}

.default-color{
  background-color: #39d52d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
</div>

Answer 2

您当然可以将它们移至CSS类，然后使用addClass()将这些类附加到各个元素。

因此，在下面的示例中，我不是使用.css()来分配background-color，而是使用.addClass()方法来分配class。请注意，您也可以使用自定义data-属性而不是类来实现上述目的，但这只是选择的问题。

还请注意，我正在使用background，因此它将覆盖您设置的任何background-image或background-color，因为它是简写。如果需要，您可以显式使用这些属性。

我进一步重构了以下代码，进一步扩展了我的解释。在这里，我创建了一个简单的对象，而不是使用switch-case来映射带有class名称的单词，而当您开始添加更多项目时，它们可能很难看。后来，我使用三元运算符，并将这些单词用作对象键，随后它们将返回所需的class。如果密钥不存在，则假定它为default。

$(function() {
  var mapTags = {
    diesel: 'tag-red',
    auto: 'tag-cyan',
    uncategorized: 'tag-green'
  };

  $('.image-container > .status-tag').each(function() {
    var elm = $(this), t = elm.text().toLowerCase();
        elm.addClass(mapTags[t] ? mapTags[t] : mapTags.uncategorized);
  });
});

.tag-green {
  background: #39d52d;
}

.tag-red {
  background: #ff0000;
}

.tag-cyan {
  background: #6dc8bf;
}

.status-tag {
  height: 50px;
  width: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag">Diesel</div>
  <div class="status-tag">AUTO</div>
  <div class="status-tag">Bleh</div>
</div>

Answer 3

您需要使用addClass jquery方法

$(function() {
  //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
  $('.image-container>.status-tag').each(function() {
    console.log($(this).text());
    var text = $(this).text().toLowerCase();
    switch (text) {
      case 'diesel':
        className = 'diesel';
        break;
      case 'auto':
        className = 'auto';
        break;
      default:
        className = 'defaultClass';
    }
    $(this).addClass(className);
  });
});

.diesel {
  background-color: blue;
}

.auto {
  background: red;
}

.defaultClass {
  background: #39d52d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
</div>

基于div标签内文本的条件类

3 个答案: