使用jQuery實現目標動態HTML

我正在研究一個WordPress主題，並使用JS根據切換的類別項進行實時過濾。類別鏈接剛剛從wp_list_categories();創建並與WP_Query();使用jQuery實現目標動態HTML

目前，我有獨特的帖子的ID集的JS使這項工作，但有其他人使用的主題產生的郵冊，我不想他們必須在每次添加新類別時編輯JS。基本上，我想要有JS功能和過濾器帖子，無論添加了多少類別。

我當前的標記就是這樣的：

<section id="sidebar"> 
    <ul> 
     <li class="cat-item cat-item-1"></li> 
     <li class="cat-item cat-item-2"></li> 
     <li class="cat-item cat-item-3"></li> 
    </ul> 
</section> 

<section id="postlist"> 
    <div class="1post apost"></div> 
    <div class="2post apost"></div> 
    <div class="3post apost"></div> 
</section>

而我的JS如下：

$(".cat-item-1").click(function() { 
    $('.1post').toggle('slow'); 
}); 

$(".cat-item-2").click(function() { 
    $('.2post').toggle('slow'); 
}); 

$(".cat-item-3").click(function() { 
    $('.3post').toggle('slow'); 
});

這工作得很好，當我每一次明確地鍵入了每個類別和職位ID，但我試圖完成這樣的事情：

$(".cat-item-" + (dynamic cat ID)).click(function() { 
    $("." + (dynamic post ID that matches cat ID) + "post").toggle('slow'); 
});

這是可能的嗎？我不是世界上最有經驗的人，當談到JS時，我很抱歉，如果解決方案正在盯着我！我在這裏添加了這個小提琴：http://jsfiddle.net/davemcnally/5QZcw/ - 提前致謝！

來源

2012-09-29 Dave McNally

我猜是這樣的[FIDDLE]（http://jsfiddle.net/ 5QZcw/1 /）會這樣做嗎？ – adeneo

在我的解決辦法看看：http://jsfiddle.net/EP96x/

$('.cat-item').click(function() { 
    $('.apost').eq($(this).index()).toggle(); 
});

cat-item你點擊（第一，第二等...）它計算該元素具有類，然後切換相應的元素與類apost。

編輯：正如評論中指出的那樣，存在某些元素失序的風險。如果是這樣的情況下我們需要以配合適當的元素鏈接使用正則表達式：

http://jsfiddle.net/HKkq5/

$('.cat-item').click(function() { 
    var num = $(this).attr('class').match(/cat-item-(\d+)/)[1]; 
    $('.' + num + 'post').toggle(); 
});

來源

2012-09-29 14:53:42

這並不是一個壞主意，但如果出於某種原因任何側邊欄或後期元素出現故障，它將會失敗。我仍然會豎起大拇指。 – adeneo

@adeneo如果由於某種原因它們出現故障，這將是不可能的（沒有類名的正則表達式）來匹配哪個鏈接應該切換哪個元素。因此，額外的標記/類/ id將是必要的。 –

@adeneo我更新了我的答案。 –

使用jQuery實現目標動態HTML

回答

相關問題