时间戳

首页 > 解决方案 > 如何根据文本值显示不同的图标

javascript - 如何根据文本值显示不同的图标

问题描述

我正在使用 jQuery.countdown 在同一页面上显示多个到期日期的多个实例，并将其设置为显示剩余天数（例如“45 天”）。我已经设计了它，所以默认情况下有一个“icon-conditional-rule-pass.png”的关联背景图像。

如果显示 00 天，我有更改为 icon-conditional-rule-fail.png 的代码，这工作正常，但我苦苦挣扎的地方是我想创建一个显示警告图标的时间段，让我们说 1- 60 天，我显然需要“60 天”、“59 天”等，这很好，我只是不知道如何（或者如果可能的话）操纵代码以处理多个值。我假设这可以做到吗？

我已经尝试以各种方式修改/操作我的代码，但每当我测试时，它似乎只适用于第一个文本值而忽略其余部分。搜索网络不会产生我想要实现的结果。

$(".countdown").filter(function() {
    return $(this).text() === "00 Days";
  }).css("background-image", "url(/assets/icon-conditional-rule-fail.png)");

想要一个我可以插入多个值并让它返回所需的警告图像的脚本。我确实想创建多个脚本（例如，1 个用于在到期前 30 天显示警告，1 个用于 60 天等，但我假设我只需要将 .countdown 字段更改为其他内容。

标签： javascript

解决方案

就个人而言，我将其分为四个步骤：

  1. 创建一个 的数组ranges，其中包括个数days和相关联的icon
  2. 对于 each .countdown，将“Days”的数量解析为一个数字
  3. 使用该数字，从步骤 1 中找到相应的范围
  4. 使用该范围的图标

这不仅为您提供了一种简洁且可重用的方法，而且还允许您通过简单地编辑ranges数组来轻松更新范围和/或图标。

const ranges = [
  {
    days: 60, //60+ days
    icon: "icon-for-60plus-days.png"
  },
  {
    days: 30, //30-59 days
    icon: "icon-for-30plus-days.png"
  },
  {
    days: 1, //1-29 days
    icon: "icon-for-1plus-days.png"
  },
  {
    days: 0, //0 days
    icon: "icon-conditional-rule-fail.png"
  }
];

$(".countdown").css("background-image", function() {             //For each .countdown
  const daysAsInt = Number($(this).text().replace(" Days", "")); //Get the days as an integer
  const range = ranges.find(i => daysAsInt >= i.days);           //Find the range in the array
  return range && `url(/assets/${range.icon})`;                  //Set the background-image to the corresponding icon
});

//FOR DEMO PURPOSES ONLY
$(".countdown").each(function() { console.log($(this).text(),": ", $(this).css("background-image")); });
span { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="countdown">70 Days</span>
<span class="countdown">40 Days</span>
<span class="countdown">05 Days</span>
<span class="countdown">00 Days</span>

推荐阅读