Question

我在.js文件中有这个代码，当你在像开放产品这样的html上添加类时，它会打开product-popup。

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

它适用于I html页面上的多个产品。当我点击45.像open-product45这样的产品时，它必须打开product-popup45。

这个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;
    });

Javascript变量类或id

3 个答案: