Question

在我的页面中我有10张图片都有相同的类＆＃34; select-option＆＃34;

我的HTML是

<div class="select-option swatch-wrapper selected" data-name="A Very Scary Monster" data-value="a-very-scary-monster">
<a href="#" style="width:120px;height:120px;" title="" class="swatch-anchor">
<img src="image ur1" alt="" class="" width="120" height="120"></a></div>

同样，我有10张图片。

  function init_swatches() {

      $('.select-option').delegate('a', 'click', function(event) {
          ///////////// Some code here
        var $the_option = $(this).closest('div.select-option');

      });
}

我想预先选择第3张图片。所选择的图像具有选择的类别，而其他图像则没有。如何在加载时触发第3或第4个元素。如何为第n个元素手动触发此委托事件。

在这里，我想触发此点击事件

Answer 1

你可以使用jquery的触发方法

function init_swatches() {

  $('.select-option').delegate('a', 'click', function(event) {
      ///////////// Some code here
    var $the_option = $(this).closest('div.select-option');

  });
  $('.select-option a').eq(2).trigger("click");
}

Answer 2

首次绑定锚标记上的点击事件

$('.select-option').delegate('a', 'click', function(event) {
          ///////////// Some code here
        var $the_option = $(this).closest('div.select-option');

  });

然后手动触发第3个元素的点击事件，如下所示

$('.select-option a').eq(2).click()

或

  $('.select-option a').eq(2).trigger("click")

Answer 3

我不确定您是否想要触发点击事件，而是使用点击事件来设置所选的类。这样的事情可能更合适：

$(document).ready(function() {
    $(document).delegate(".select-option", "click", function(e) {
        if ($(this).hasClass("selected") == false) {
            $(".select-option.selected").removeClass("selected");
            $(this).addClass("selected");
        }
    });
    selectNthImage(3);
});

function selectNthImage(n) {
    $(".select-option.selected").removeClass("selected");
    $(".select-option:nth-child(" + n + ")").addClass("selected");
};

查看jsfiddle here

jquery为第n个元素onload触发委托事件

3 个答案: