Question

我目前正在尝试根据跨度内的文字更改div中背景图片的位置。

我的问题是多个div具有相同的类，这些不可更改。

例如。我想要更改图像位置的每个单元格如下：

<td class="js-gridBlock js-Pre-order" data-attvalue1="3XL" data-attvalue2="Plum">
  <div class="js-gridImage">
    <div class="prodpageGridText" id="gridtext-gridbox34">
      <span class="status">Due in 4 weeks</span><br>
      <div class="prodpageGridTextArrow">
      </div>
     </div>
   </div>
</td>

Span类状态值在1-10之间的任何位置变化。

我的jQuery目前看起来像;

 jQuery(document).ready(function() {
      if (jQuery('span.status:contains("4")')) {
            jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -213px"); 
        } 
      if (jQuery('span.status:contains("5")')) {
            jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -242px"); 
        }
     if (jQuery('span.status:contains("10")')) {
            jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -387px"); 
        }
    });

我的问题是当每个js-gridImage运行jQuery时，然后更改为("background-position", "-4px -387px")，因为我需要它们根据其spanvalues进行更改。

我已经看过.each（）函数，但我不确定如何将它合并到我的代码中。

提前致谢。

Answer 1

您可以使用元素之间的关系，此处.closest(selector)可用于遍历以获取所需元素并设置CSS规则。

jQuery(document).ready(function() {
    jQuery('span.status:contains("4")').closest('.js-gridImage').css("background-position", "-4px -213px"); 
    jQuery('span.status:contains("5")').closest('.js-gridImage').css("background-position", "-4px -242px"); 
    jQuery('span.status:contains("10")').closest('.js-gridImage').css("background-position", "-4px -387px"); 
});

运行if / each语句选择div并独立改变背景图像位置

1 个答案: