Question

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

如果代码显示00天，我有更改为icon-conditional-rule-fail.png的代码，它可以正常工作，但是我要挣扎的是我要创建一个时期，在该时期内，将让let显示警告图标例如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字段更改为其他内容即可。

Answer 1

我个人将其分为四个步骤：

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

这不仅为您提供了一种简洁且可重复使用的方法，而且还使您可以通过简单地编辑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>

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

1 个答案: