使用 jQuery 的 .append() 方法对“:after”选择器进行样式化时出现问题

Question

我一直在努力通过使用 jQuery 访问“:after”选择器来使 div 风格化。

我在某个 div:

之前附加了一张看起来像这样的卡片

let tempHtml = `
  <div class="card" id="${objectId}">
    <div>
      <a href="#register-popup" onclick="openEditPopup()">
        <img src="${image}">
      </a>
    </div>
    <div>
      <a href="#register-popup" onclick="openEditPopup()" class="menu-name"><br>${nameKr}</a>
      <div class="price">￦ ${numberWithCommas(price)}</div>
    </div>
  </div>
`;

let category = categories[menuType];
$(`.${category} > div > div.last-card`).before(tempHtml);

然后在卡片下方，我尝试添加一个标签，上面写着“SALE”或“SOLD”，具体取决于我所售商品的状态。我试过的是这样的：

if (isDiscounted > 0) {
  $(`#${objectId} > div > div.price`).html(`<del>￦ ${numberWithCommas(price)}</del><br> → ￦ ${numberWithCommas(price - isDiscounted)}`);
  $(`#${objectId}`).append(`<style type="text/css">div#${objectId}:after {display: block; position:fixed; height: 1rem; width: 35px; padding: 10px 5px 10px 5px; margin: 10px 0 0 40px; background-color: #f07303; color: #ffffff; font-size: 0.8rem; content: "SALE"}</style>`);
}

if (isSoldOut === true) {
  $(`#${objectId}  > div > a`).append(`<style type="text/css">#${objectId} > div > a > img {-webkit-filter: grayscale(100%); filter: gray;}</style>`);
  $(`#${objectId} > div > div.price`).append(`<style type="text/css">#${objectId} > div > div.price:after {display: block; height: 1rem; width: 35px; padding: 10px 5px 10px 5px; margin: 10px 0 0 40px; background-color: #818181; color: #ffffff; font-size: 0.8rem; content: "SOLD";}</style>`);
}

第一个“.html()”方法工作得很好，但所有其余的 .append() 行都无法完成将标签添加到卡片的工作。当我第一次在 PyCharm 上进行本地测试时，它们运行良好。唯一的区别是我的 HTML 文档现在正在与服务器交互。我应该怎么做才能解决这个问题？

Answer 1

我刚刚通过切换类解决了这个问题。这样干净多了。一旦我的卡片数量达到相当大的数量，浏览器似乎会忽略或反对应用任何更多 jQuery 控制的 CSS 与每个 ObjectId 关联的片段（在我的推测中，可能是为了最大限度地减少开销）。

CSS:

div.sale-sign:after {
  display: block;
  position:fixed;
  height: 1rem;
  width: 35px;
  padding: 10px 5px 10px 5px;
  margin: 10px 0 0 40px;
  background-color: #f07303;
  color: #ffffff;
  font-size: 0.8rem;
  content: "SALE"
}

a.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
}
        
div.sold-sign:after {
  display: block;
  height: 1rem;
  width: 35px;
  padding: 10px 5px 10px 5px;
  margin: 10px 0 0 40px;
  background-color: #818181;
  color: #ffffff;
  font-size: 0.8rem;
  content: "SOLD";
}

jQuery:

if (isDiscounted > 0) {
  $(`#${objectId}> div > div.price`).html(`<del>￦ ${numberWithCommas(price)}</del><br> → ￦ ${numberWithCommas(price - isDiscounted)}`);
  $(`#${objectId}`).toggleClass("sale-sign");
}

if (isSoldOut === true) {
  $(`#${objectId} > div > div`).toggleClass("sold-sign");
  $(`#${objectId} > div > a`).toggleClass("grayscale");
}

使用 jQuery 的 .append() 方法对“:after”选择器进行样式化时出现问题

Problem stylizing ":after" selector with jQuery's .append() method

html

javascript

css

jquery

selector