檢查數組中的變量的圖像源

我有一個產品陣列，我希望能夠通過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*=]選擇內部變量，並在上面的代碼去上班？

來源

2017-01-30 Dan382

試試這個：

$(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'); 
 
    });  
 
});

<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>

來源

2017-01-30 13:19:34 Soliyappan

輝煌，我添加了「src * =」而不是「src^=」，但其餘代碼的工作方式如前所述（並且與我的類似，足以容易讀取）。非常感激。 – Dan382

試試這個代碼

$(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'); 
    } 
});

來源

2017-01-30 13:05:16

只處理第一個 – mplungjan

有，但他們需要使用循環來獲得整個 –

那麼，是你的循環？ – mplungjan

您可以使用該陣列的有效選擇，然後使用.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');

來源

2017-01-30 13:07:25 Satpal

嘗試以下操作：

只需要添加：

$('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'); 
    });

來源

2017-01-30 13:09:10

這是無效的JS – mplungjan

要多一個加進來，使用filter：

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

fiddle

來源

2017-01-30 14:00:18

檢查數組中的變量的圖像源

回答

相關問題