In your Blog Post List filter system, these three modes should work like this:
1. Logic: AND
Rule: A post must contain ALL selected labels.
Example:
Selected labels:
Microsoft Project
SOP
Construction
Results:
✅ Post A: Microsoft Project + SOP + Construction
❌ Post B: Microsoft Project + SOP
❌ Post C: SOP + Construction
❌ Post D: Microsoft Project only
Only posts containing every selected label are shown.
Pseudo code:
postLabels.includes("Microsoft Project") &&
postLabels.includes("SOP") &&
postLabels.includes("Construction")
2. Logic: OR
Rule: A post can contain ANY selected label.
Example:
Selected labels:
Microsoft Project
SOP
Construction
Results:
✅ Post A: Microsoft Project
✅ Post B: SOP
✅ Post C: Construction
✅ Post D: Microsoft Project + SOP
✅ Post E: SOP + Construction
Only posts with none of those labels are hidden.
Pseudo code:
postLabels.includes("Microsoft Project") ||
postLabels.includes("SOP") ||
postLabels.includes("Construction")
3. Logic: ONLY ONE
Rule: Show posts that match exactly one selected label.
Example:
Selected labels:
Microsoft Project
SOP
Construction
Results:
✅ Post A: Microsoft Project
✅ Post B: SOP
✅ Post C: Construction
❌ Post D: Microsoft Project + SOP
❌ Post E: SOP + Construction
❌ Post F: Microsoft Project + SOP + Construction
Pseudo code:
let matchCount = 0;
if(postLabels.includes("Microsoft Project")) matchCount++;
if(postLabels.includes("SOP")) matchCount++;
if(postLabels.includes("Construction")) matchCount++;
return matchCount === 1;
Expected Result Table
| Post Labels | AND | OR | ONLY ONE |
|---|---|---|---|
| MP | ❌ | ✅ | ✅ |
| SOP | ❌ | ✅ | ✅ |
| Construction | ❌ | ✅ | ✅ |
| MP + SOP | ❌ | ✅ | ❌ |
| SOP + Construction | ❌ | ✅ | ❌ |
| MP + SOP + Construction | ✅ | ✅ | ❌ |
Most Common Reason It Stops Working
When changing from:
<button id="label-logic-button">
to
<select id="label-logic-button">
the old code often still uses:
labelLogicButton.addEventListener('click', ...)
A <select> should use:
labelLogicButton.addEventListener('change', function () {
currentLogic = this.value;
applyFilters();
});
If your v6.6.7 code still does not work, the problem is almost certainly inside the JavaScript filter engine, not the HTML or CSS. I would need to inspect the section containing:
applyFilters()
filterPosts()
selectedLabels
labelLogicButton
to identify the exact bug.