使用JS显示依赖于元素类的图像

Use JS to show images dependant on element class

本文关键字：图像 元素 依赖于 JS 显示 使用      更新时间：2023-09-26

我想在某人搜索特定类别中的产品时显示一组特定的徽标。logo图像元素最初是隐藏的(显示为none)，并将有一个类来表示类别id。类别决定了显示什么标志。我的一个标志的html是:

<li id="show-logo" style="display: none;">
    <!-- PLaytex Logo -->
    <img src="/images/logos/playtex.jpg" class="cat_1">
</li>

所以我的函数应该如下:

showPartnerLogos(element, cat_id);
function showPartnerLogos(element, cat_id) {
    // then show the images with that class cat_id for that element 
}

我没有做任何代码，因为我的JS是惨淡的，但这个函数是目前被用来显示一个模态时，有人搜索产品:

$('#modal .spinner').spin('flower', 'black');
// Loop through all selected categories
$("#form_buy input[name='buy_product']:checked").each(function() {
    $('#modal').find('.cat_' + $(this).val() ).show();
});
setTimeout(function() {
    document.location.href = $(form).attr('action');
},0);

这个函数显示在一个模态的标志，我希望能够做同样的除了显示在页面上的标志。

试试这个

function showPartnerLogos(element, cat_id) {
// then show the images with that class cat_id for that element 
$(element + '.' + cat_id).show();
}

这将显示cat_id中发送的类的所有img元素。

理想情况下，你不需要参数element只显示所有的img标签，但上面的代码可以用来隐藏任何类型的元素，前提是你在参数element

中传递标签名称
function showPartnerLogos(cat_id) {
// then show the images with that class cat_id for that element 
$('img.' + cat_id).show();
}

如果有帮助，请告诉我。

它会像这样:

function showPartnerLogos(element, cat_id) {
    $(element+"."+cat_id).show();
}

应该这样调用:

showPartnerLogos("img", "cat_1");

显示与cat_1类匹配的所有图像元素。诀窍是使用最终匹配器:"img。

相关文章：