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') と find('a') の組み合わせを使用できます。

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

TriggerHandler は dom ツリーをバブルアップしないため、アンカー タグにバインドされたトリガーがないアンカーのみでクリックをトリガーしようとします。trigger('click') または単に .click() を使用して、スパンのイベント ハンドラーまでイベントを伝達するか、検索を変更してスパンを直接検索します。

于 2012-09-14T16:42:05.987 に答える