Javascript变量类或id

Question

我在.js文件中有这段代码，当您在html上添加类时，比如open-product，它会打开产品弹出。

$('.open-product').on('click', function(){
        showPopup($('#product-popup'));
        initSwiper();
        return false;
    });

但我想这样用..。

 $('.open-product(product id variable)').on('click', function(){
        showPopup($('#product-popup(product id variable)'));
        initSwiper();
        return false;
    });

它适用于Its页面上的多个产品。当我点击45。产品像开放产品45，它必须打开产品弹出45。

这个javascript代码应该是怎样的？

对不起我的英语。

Answer 1

将数据属性添加到HTML中：

<div class="open-product" data-product_id="1"></div>

那么在你的JS中：

$('.open-product').on('click', function(){
     var product_id = $(this).data('product_id');
     showPopup($('#product-popup'+product_id));
     initSwiper();
     return false;
});

Answer 2

你试过吗？

var productId = 1;

$('.open-product' + productId).on('click', function(){
        showPopup($('#product-popup' + productId));
        initSwiper();
        return false;
    });

Answer 3

您可以考虑在按钮中使用一些参数。

<button class="open-product" data-product="1">Open product 1</botton>

JS

$('.open-product').on('click', function(){
        showPopup($('#product-popup-' + $(this).data('product')));
        initSwiper();
        return false;
    });

甚至还可以考虑使用弹出id：

<button class="open-product" data-popup="#product-popup-1">Open product 1</botton>

JS

$('.open-product').on('click', function(){
        showPopup($($(this).data('popup')));
        initSwiper();
        return false;
    });