Question

我有一系列产品，我希望能够通过jQuery检查它们是否存在于图像源URL中。我已经做了以下但不知道在脚本中调用我的变量的正确方法：

$(function() {
    /*Products we to target*/
    var products = ["product1.jpg", "product2.jpg", "product3.jpg"];
    $('ul.product-list li img[src*=products]').addClass('targeted-product');
});

如何在img[src*=]选择器中调用我的变量，以上代码是否可行？

Answer 1

试试此代码

$(function() {
  /*Products we to target*/
  var products = ["product1.jpg", "product2.jpg", "product3.jpg"];
  for(i=0; i<products.length; i++) {
    $('ul.product-list li img[src*=]'+products[i]).addClass('targeted-product');
  }
});

Answer 2

您可以使用数组创建有效的选择器，然后使用.find()来获取后代。

var selector = products.map(function (p) {
    return "img[src*=" + p + "]"
}).join(',');

//Use the selector string
$('ul.product-list li').find(selector).addClass('targeted-product');

Answer 3

试试这个：

＆＃13;

$(function() {
    /*Products we to target*/
    var products = ["product1.jpg", "product2.jpg", "product3.jpg"];
    $.each( products, function( key, value ) {
       $('ul.product-list li img[src^="' + value + '"]').addClass('targeted-product');
    });      
});

＆＃13;

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<style>
 .targeted-product{background-color: green;}
</style>
<body>
  <ul class="product-list">
    <li><img src ="product1.jpg"/></li>
    <li><img src ="product2.jpg"/></li>
    <li><img src ="product4.jpg"/></li>
    <li><img src ="product5.jpg"/></li>
    <li><img src ="product3.jpg"/></li>
  </ul>
</body>  
</html>

＆＃13;

Answer 4

尝试以下操作：

只需添加：

$('ul.product-list li 

    img[src*='+products['0']+']').addClass('targeted-product');

    $(function() {  
        /*Products we to target*/
        var products = ["product1.jpg", "product2.jpg", "product3.jpg"];
        $('ul.product-list li img[src*='+products['0']+']').addClass('targeted-product');
    });

Answer 5

使用filter：

添加一个混音

$('ul.product-list li img').filter(function(){return products.indexOf($(this).attr('src')) !== -1;}).addClass('targeted-product');

fiddle

检查数组中变量的图像源

5 个答案: