Javascript - 选择和 .click()

Question

我正在尝试在访问网站时自动执行点击。这是我正在查看的 HTML。

<div class="box_wrapper">
     <a id="itemcode_11094414" class="box">7.5</a>
     <a id="itemcode_11094415" class="box">8</a>
     <a id="itemcode_11094416" class="box">8.5</a>
</div>

当我选择尺码时，例如尺码 8，class= 标签变成“box active”，就像这样，

<div class="box_wrapper">
     <a id="itemcode_11094414" class="box">7.5</a>
     <a id="itemcode_11094415" class="box active">8</a>
     <a id="itemcode_11094416" class="box">8.5</a>
</div>

我怎样才能遍历类(class)并选择所需的尺寸？此外，我只是在四处修修补补，发现我很难模拟点击添加到购物车和其他按钮。对于添加到购物车，HTML 看起来像这样，

<div class="add_to_cart">
    <div class="add_to_cart_left">
        <img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>  
        <img id="add_to_bag_btn_processing" alt="" src="/images/add_to_bag_processing.gif"></img>
    </div>
</div>

这是我应该查看的用于模拟点击的正确 HTML block 吗？

Answer 1

因为现在是圣诞节，而且您看到 jQuery 的运行听起来很兴奋，所以我为您制作了一个 fiddle 。这是您(可能)想要使用 jQuery 的示例:http://jsfiddle.net/akkJ5/2/

选择size和twiddling active classes的代码如下:

var selectedSize = '';

$(".box").click(function(){
    $(".box").removeClass('active');
    $(this).addClass('active');
    selectedSize = $(this).html();
    $("#messages").html(selectedSize +" was selected");
});

我在其中创建了一个事件监听器，用于点击所有 box 类元素。由于只有一个应该处于事件状态，因此我从所有 box 类元素中删除了 active 类，然后将 active 添加到单击的框中。我将所选链接的 innerHTML 保存为 selectedSize，并将其写入元素以供显示。

在模拟按钮点击方面，您可以这样做:

$(".add_to_cart").click(function(){
   alert('cart clicked'); 
});

$(".add_to_cart").trigger('click');