CODEWITHSUNDEEP
jquery
methuselah
methuselah

Reputation: 13206

Hide div element if attribute does not match filter

I am building a simple filter feature onto my website.

Once the user selects a location from the .start-address and .end-address dropdown, and then presses #go-button, how would I only show the div's which contain a <span class="waypoint"></span> wherein the custom attribute waypoint matches either what is in .start-address and .end-address.

Please note that I want to hide the entire waypoint-detail if a match is not found in the waypoints within it, not just a single waypoint.

I have mocked up a quick jsFiddle to show this: http://jsfiddle.net/tLhdndgx/3/.

HTML

<div class="row">
    <div class="col-md-4">Start:
        <br>
        <select class="form-control start-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">Destination:
        <br>
        <select class="form-control end-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">
        <button type="button" class="btn btn-success" id="go-button">Go</button>
    </div>
</div>
<br>
<div class="panel panel-default waypoint-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 1</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Hall</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Apartments">Apartments</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Church">Church</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>
<div class="panel panel-default rideshare-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 2</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Park</span>
                <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="College">College</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>

JavaScript

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
});

Upvotes: 5

Views: 1810

Answers (5)

Mike Hamilton
Mike Hamilton

Reputation: 1567

You can iterate through all of the divs and if their waypoint attribute is not equal to the one set in the dropdown then hide the parent container and exit the iteration. This code checks to see if the waypoint we are at in the iteration matches the start or end destination, if it does then we exit the iteration because we have a match. If it doesn't match, we keep going until we are on the last iteration. If we are on the last iteration and still don't have a match, we simply hide the parent container.

$('#go-button').click(function() {
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    function checkWaypoints(container){
        $(container).show();
        $(container+' .waypoint').each(function(a,b){
            var waypoint = $(b).attr('waypoint');
                   console.log(waypoint);
                if((waypoint == startAddress) || (waypoint == destinationAddress)){
                    return false;  
                }
                else if($((waypoint != startAddress) && (waypoint != destinationAddress)) && a == $(container+' .waypoint').length-1) {
                    $(this).closest(container).hide();
                }

         });
    }

    checkWaypoints('.waypoint-detail');
    checkWaypoints('.rideshare-detail');

});

Here is a fork of your JSFiddle with my answer: http://jsfiddle.net/w1ok0p6o/5/

Upvotes: 1

Spencer
Spencer

Reputation: 116

Here is one way to do it. You can get all of the div that don't contain a span with the class of "waypoint" and waypoint attribute equal to one of the selected options, then apply the jquery hide().

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    $('div').filter(function (index) {
        return $(this)
            .find("span.waypoint[waypoint=" + startAddress + "], span.waypoint[waypoint=" + destinationAddress + "]")
            .length == 0;
    }).hide();
});

jsfiddle: http://jsfiddle.net/4rvz09mu/

Upvotes: 1

Jack
Jack

Reputation: 8941

This should do it. http://jsfiddle.net/tLhdndgx/10/

var waypoints = $('.waypoint'),
    details = $('.waypoint-detail');

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    details.hide();
    waypoints.filter(function(){
        var self = $(this),
            waypoint = self.attr('waypoint');
        return (waypoint == startAddress || waypoint == destinationAddress);
    }).parent(details).show();
});

Upvotes: 2

isherwood
isherwood

Reputation: 61063

Here's a start. Simply assign the right elements to a variable and show those.

$('body').on('click', '#go-button', function (event) {
    ...
    var myDivs = $('.waypoint[waypoint=' + startAddress + ']');

    myDivs.show();
});

Demo

Notice that I've hidden the divs initially with CSS. This prevents weirdness at page load.

Here's a simplistic way to get it all. There's a way to combine those selectors, but it escapes me at the moment.

Demo 2

You'll probably want to restructure to put your arrows inside the hide/show divs.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

I don't really understand your UI but you can use filter()

var $waypoints = $('.waypoint').parent()

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();
    // check for at least one value
    if (startAddress || destinationAddress) {
        // hide all then filter the ones that match to show
        $waypoints.hide().filter(function () {
            var waypointVal = $(this).find('.waypoint').attr('waypoint');
            return waypointVal == startAddress || waypointVal == destinationAddress
        }).show()
    } else {
        //otherwise show all
        $waypoints.show();
    }

});

Note that <center> tag is deprecated, use css instead

DEMO

Upvotes: 1

Related Questions