jQuery查看图像alt标签是否在变量数组中，然后添加类

Question

i具有图像的HTML网格。我想使用jQuery将HTML添加到所有具有匹配列表或数组项目的ALT标签的图像中。

如果找到了特定的ALT标签，请使用JQuery将类添加到HTML的帖子有所不同，但是我试图使用ALT标签列表来执行此操作。如果我在变量中只有一个值，我可以使它起作用。我如何使其与alt标签的全部值列表一起使用？

<main class="grid">
<div><img src="/images/image_1.jpg" alt="1904380_ORAN"></div>
<div><img src="/images/image_2.jpg" alt="1904380_VANI"></div>
<div><img src="/images/image_3.jpg" alt="1904380_WHIT"></div>
<div><img src="/images/image_4.jpg" alt="1904381_BERR"></div>
</main>
$(document).ready(function() {
var list = ("1904381_BERR", "1904380_ORAN");                        
$('img').each(function(){
    if($(this).attr("alt") == list ){             
          $(this).before("<img src=/images/guide/dropped.png class=cxl>");
          }
      });
});

Answer 1

这是一个工作小提琴

$(document).ready(function() {
  var list = ["1904381_BERR", "1904380_ORAN"];
  $('img').each(function(_i, _e) {
    if (jQuery.inArray($(this).attr('alt'), list) > -1) {
      $(this).before('<img src="/images/guide/dropped.png" class="cxl">');
    }
  });
});

您的代码存在一些问题。

• 列表变量不是数组
• 您将列表与数组进行比较的方式不正确。
• <img>标签您包括before需要更多的引号来分开属性。

Answer 2

注释中提到的需要使用数组，只需检查 alt 包含所需值：

$(document).ready(function() {
    var list = ["1904381_BERR", "1904380_ORAN"];
    $('img').each(function() {
        if (list.indexOf($(this).attr("alt")) !== -1) {
            $(this).before('<img src="/images/guide/dropped.png" class="cxl">');
        }
    });
});