如何單擊最近的錨時，我的自定義複選框被切換

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

當用戶切換複選框時，你們推薦哪種方式作爲最有效的方式觸發錨點？這是一個分面搜索錨，所以我需要選中或不選中才能觸發相同的錨標記。

在此先感謝那些花時間幫助我的人。

Answer 1

最近只看一個元素的直接祖先。您可以使用最接近的（'li'）和find（'a'）的組合來實現您的目標。

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

TriggerHandler不能上升DOM樹，所以它試圖觸發僅在錨，這沒有觸發綁定到錨標記上的點擊。使用觸發器（'click'）或簡單地.click（）使事件傳播到跨度上的事件處理程序，或更改查找以直接查找跨度。

Answer 2

您需要更換下面一行：

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

這一個：

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