score:1
The reason why no matches remain when you check both is that you generate filters that contain contradictory conditions. For instance, it would generate 3 selectors like this:
[data-staralt~='4.5'][data-staralt~='category']
[data-cat~='4'][data-cat~='Ramen']
[data-star~='4'][data-star~='Ramen']
Each one is saying that the attribute should contain both words at the same time. This is not what you were after. Instead, I think you want to perform this logic (in pseudo language):
([data-staralt~='4.5'] or [data-cat~='4'] or [data-star~='4']) AND
([data-staralt~='category'] or [data-cat~='Ramen'] or [data-star~='Ramen'])
This you can achieve with the following code. Side note: don't use the deprecated delegate
jQuery method, but the on
method (which has its first two parameters reversed):
$(document).on('change', 'input[type=checkbox]', function() {
var $list = $('.leaflet-zoom-animated > g > circle'),
$checked = $('input:checked');
if ($checked.length) {
$list.hide();
$($checked).each(function(index, element){
// Reduce list to what matches one of the three filters.
// The comma in the selector works as a logical OR:
$list = $list.filter("[data-staralt~='" + element.name + "'],[data-cat~='" + element.value + "'],[data-star~='" + element.value + "']");
});
}
// Show what remains in list:
$list.show();
});
Appendix
After our conversion, I have the impression you need the following logic:
([data-staralt~='4.5'] or [data-staralt~='3.5']) and
([data-cat~='4'] or [data-cat~='3']) and
([data-star~='4'] and [data-star~='3])
I also came to understand the reason for staralt
, i.e. to include 3.5 also when 3 is selected. But this you can do with the ^=
comparison. So I would do that instead of the extra name
attribute check.
So that leads to the following code:
function createFilter(type) { // Helper function
var filter = [];
$("#" + type + '-filter input:checked').each(function(index, element) {
filter.push("[data-" + type + "^='" + element.value + "']"); // Use ^= to match the start of the actual value
});
return filter.join(",") || "*"; // Asterisk means: no filter at all
}
$(document).on('change', 'input[type=checkbox]', function() {
$('.leaflet-zoom-animated > g > circle')
.hide()
.filter(createFilter("star")) // Any of the checked star selections, AND
.filter(createFilter("review")) // Any of the review selections, AND
.filter(createFilter("cat")) // Any of the cat selections
.show(); // Show the matches of the above filter
});
Source: stackoverflow.com
Related Query
- Jquery filtering by multiple parameters issue
- Adding multiple objects to svg and adding drag behaviour issue
- How to fix a display issue in a multiple line graph. The svg.append("path") is not displaying anything
- Combine multiple csv files in javascript using filtering
- d3js bar chart issue when used with jquery mobile
- Issue creating overlapping multiple pie charts (circular progress bars)
- Issue highlighting node in d3 network with jQuery datepicker
- d3js multiple networks issue
- Issue with multiple d3 graphs on same page
- Performance issue with dc.js with graphs in multiple tabs on a page
- Scope issue between jQuery request and d3.js
- Issue adding multiple text elements to svg elements
- How to paginate multiple HTML tbodies with jQuery
- dependent filtering with two jquery dropdowns
- Issue while plotting multiple graphs on single page
- D3.js and jQuery - multiple map points and click events
- D3 JS select multiple countries for highlighting issue
- Zero-index problem and filtering issue in shiny
- Zero-index problem and filtering issue in shiny
- Multiple line chart issue from json
- Call a function with multiple parameters on a data object in D3
- D3.js prepend (similar to jQuery prepend)
- Appending multiple non-nested elements for each data member with D3.js
- How to set multiple attributes with one value function?
- d3 add multiple classes with function
- Drawing Multiple Lines in D3.js
- How to select multiple selectors with selectAll?
- How to use D3 selectAll with multiple class names
- Drawing multiple edges between two nodes with d3
- Importing data from multiple csv files in D3
More Query from same tag
- D3 Donut transition, d,i getting undefine
- How do I get my area filled beneath my d3 line chart to be a gradient?
- How to remove data cleanly before updating d3.js chart?
- Place label beside links on collapsible d3 tree layout
- New to d3, unable to show graph with json
- d3.js Overlay Graph
- How do you conditionally remove elements with d3?
- D3 - attr "r" as compared to total screen size
- D3, SVG and textPath: How to move the text down?
- d3 json loading error Uncaught TypeError: Cannot read property 'length' of undefined
- Delete a node from a list in D3 and reset layout
- Dark filled Links being displayed when downloading d3 hierarchical edge bundling visualization as PNG
- Do d3.js and angular.js step on each other's toes?
- Hierarchical force diagram using D3.js
- Need help on updating a D3.js wordcloud
- Working with 2D array in D3
- Drawing Non-Continuous Horizon Charts (d3)
- AngularJs update function with <select> <option> is not working
- d3 - axis ticks not working unlike tickValues
- dynamically update d3.js treemap
- Combining D3 Visualization
- Add hyperlink to d3.js table cells with dataset
- How to add colours to D3 js sunburst diagram from JSON-file?
- D3.js radar chart tooltip
- Make barchart with one object of data
- Stacked Vertical Bar Chart Labeling - D3.js
- how to detect mousemove if svg is behind another element
- d3.js forcelayout not showing up with data from python on flask
- Styling d3´s tooltip
- How to create a tooltip for multiple points in a scatterplot with d3