I am looking to display specific logos based on a user's search for a product within a certain category. Initially, the logo image element is hidden (display none) and will be assigned a class corresponding to the category ID. The category ID will determine which logo should be displayed. Here is an example of HTML code for one logo:
<li id="show-logo" style="display: none;">
<!-- Nike Logo -->
<img src="/images/logos/nike.jpg" class="cat_2">
</li>
Therefore, I would like my function to work in the following way:
showPartnerLogos(element, cat_id);
function showPartnerLogos(element, cat_id) {
// Show the images with the corresponding class cat_id for that element
}
While I have not yet written any code due to my limited JavaScript skills, a similar function is currently being used to display a modal when a user searches for a product:
$('#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);
This existing function displays the logos in a modal; however, I aim to achieve the same effect by displaying the logos directly on the page.