javascript - 当我的自定义复选框被切换时如何单击最近的 anchor

Question

HTML

<li class="leaf">

  // The span is my custom checkbox that wraps around the default checkbox.     
  <span class="checkbox facetapi-checkbox checked">

    // The span above replaces the default checkbox below, which you'll notice has a display:none; I don't want both checkboxes showing.
    <input type="checkbox" class="facetapi-checkbox" checked="true" style="display: none; ">

  </span>


  // This is the anchor tag that I need to click when my custom checkbox is checked.
  // It's outside of my custom checkbox span, but shares the same parent.  
  <a href="/part-finder/field_rep_catalog/heater-1527" rel="nofollow" class="facetapi-active facetapi-checkbox-processed" style="display: none; ">(-) 
     <span class="element-invisible">Remove Support filter</span>
  </a>

</li>

这是用于用我的自定义复选框替换默认复选框的 jQuery:

//Checkbox Image Replacement 
$('.faceted_search_column input[type=checkbox]').each(function() {
  var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
  if ($(this).is(':checked')) {
    span.addClass('checked');
  }
  $(this).wrap(span).hide();
});

// You'll notice that when this function is run, I've attempted to use .closest() to find the nearest anchor and then do a .triggerHandler('click') to click that anchor it finds. This obviously didn't work. Should I use .parent() to move back in the DOM?
function doCheck() {
  if ($(this).hasClass('checked')) {
    // This was my attempt to click the anchor when doCheck function is run.
    $(this).closest('a.facetapi-checkbox-processed').triggerHandler('click');
    $(this).removeClass('checked');
    $(this).children().prop("checked", false);
  } else {
    $(this).parents('a.facetapi-checkbox-processed').triggerHandler('click');
    $(this).addClass('checked');
    $(this).children().prop("checked", true);
  }
}

function doDown() {
  $(this).addClass('clicked');
}

function doUp() {
  $(this).removeClass('clicked');
}

你们建议当用户切换复选框时触发 anchor 点击的最有效方法是什么？它是一个多面搜索 anchor ，因此我需要选中或取消选中才能触发相同的 anchor 标记。

预先感谢那些花时间帮助我的人。

Answer 1

最近仅查看元素的直接祖先。您可以结合使用closest('li') 和find('a') 来实现您的目标。

 $(this).closest('li').find('a.facetapi-checkbox-processed').click();

TriggerHandler 不会在 dom 树中冒泡，因此它会尝试仅触发 Anchor 上的点击，而 Anchor 标签上没有绑定(bind)任何触发器。使用触发器('click')或简单地使用 .click() 将事件传播到跨度上的事件处理程序，或更改查找以直接查找跨度。