0

使用自定义复选框进行分面搜索

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

当用户切换复选框时，你们推荐什么作为触发锚点点击的最有效方法？这是一个多面搜索锚，所以我需要选中或取消选中才能触发相同的锚标记。

提前感谢那些花时间帮助我的人。

4

2 回答 2

1

您需要替换以下行：

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

对于这个：

$(this).siblings('a.facetapi-checkbox-processed').triggerHandler('click');
于 2012-09-14T16:40:41.750 回答
1

Closest 仅查看元素的直接祖先。您可以结合使用最接近（'li'）和查找（'a'）来实现您的目标。

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

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

于 2012-09-14T16:42:05.987 回答