jquery - 用 Optimizely 替换多个页面上的类

Question

我正在尝试使用 Optimizely 设置 A/B 测试，以更改网站上所有产品页面上添加到购物车按钮的颜色。

这是网站上的当前代码

<input id="id-for-test" class="add_to_cart_list" value="Add to Cart" name="Add to Cart" type="button"
                                                    onclick='sendToDataLayer("Category Lower", "Add to cart");return cat_add_one_to_cart( "<?= $p["id"] ?>", "<?= $param_sku ?>", "<?= $output_price ?>", "<?= $path ?>", "<?= $can_buy_limit ?>" ,"<?=$this_page_type?>")'/>

我在 Optimizely 代码编辑器中添加它，但它不起作用

$('#id-for-test').removeClass('add_to_cart_list').addClass('color-test');

Answer 1

给每个购物车input元素一个公共类，例如cart-class：

<input id="id-for-test" class="cart-class add_to_cart_list" value="Add to Cart" name="Add to Cart" type="button"
    onclick='sendToDataLayer("Category Lower", "Add to cart");return cat_add_one_to_cart( "<?= $p["id"] ?>", "<?= $param_sku ?>", "<?= $output_price ?>", "<?= $path ?>", "<?= $can_buy_limit ?>" ,"<?=$this_page_type?>")'/>

然后根据类而不是ID进行查询：

$('.cart-class').removeClass('add_to_cart_list').addClass('color-test');

ID 应该是唯一的，因此查询在找到它的第一个实例后就停止查找。使用一个类，以便将更改应用于所有实例。

Answer 2

我认为这应该可以解决问题：

$('input.add_to_cart_list').removeClass('add_to_cart_list').addClass('color-test');