1

I'm trying to make a color filter for a website. Where I want to remove the visible checkbox (i got that working), remove the labels etc. And only leave a div with a background color <-- this all works. But now I don't know how to make these div's click able since the input field is on hidden. Is there a way to fix this in jQuery?

Here's my code:

function onDataReceived(data) {
        $.each(data.colorInfo, function(key, colorInfo) {
            var inputElement = $("input[name^=filter][value="+colorInfo.id+"]").css("display", "none");
            var labelElement = $('label[for^=filter]').remove();
            var div  = inputElement.parent();

            div.attr('class', 'myclass_'+colorInfo.id);
            div.css("background-color", colorInfo.colorCode);
            div.css("width", "15px");
            div.css("height", "15px");
            div.css("display", "inline-block");
            div.css("marginLeft", "5px");
            div.css("marginBottom", "5px");
            //console.log(colorInfo);
        });
    }

    $(document).ready(function () {
        var url = 'myapi.json';
        $.get(url, onDataReceived);
    });

And the HTML:

<div class="filter_3">
    <input name="filter[]" value="152194" type="checkbox"/>
    <label for="filter_152194">Rood</label>
</div>
<div class="filter_4">
    <input name="filter[]" value="152196" type="checkbox"/>
    <label for="filter_152196">Blauw</label>
</div>
<div class="filter_5">
     <input name="filter[]" value="152198" type="checkbox"/>
     <label for="filter_152198">Oranje</label>
</div>
Nick Audenaerde
  • 967
  • 2
  • 14
  • 33

1 Answers1

2

Assuming that there's a function called once the div is clicked:

function onDataReceived(data) {
    $.each(data.colorInfo, function(key, colorInfo) {
        var inputElement = $("input[name^=filter]  [value="+colorInfo.id+"]").css("display", "none");
        var labelElement = $('label[for^=filter]').remove();
        var div  = inputElement.parent();

        div.attr('class', 'myclass_'+colorInfo.id);
        div.css("background-color", colorInfo.colorCode);
        div.css("width", "15px");
        div.css("height", "15px");
        div.css("display", "inline-block");
        div.css("marginLeft", "5px");
        div.css("marginBottom", "5px");
        /* Added Lines */
        div.css("pointer-events", "auto"); //Just in case, but it's probably not necessary 
        div.css("cursor", "pointer"); //It's nice to have
        div.on('click', function() { //This is a click event delgated to the div
            // Whatever code is needed when div is clicked
        });
        //console.log(colorInfo);
    });
}

$(document).ready(function () {
    var url = 'myapi.json';
    $.get(url, onDataReceived);
});
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Is there also a way if the box get unchecked to execute some code? – Nick Audenaerde May 13 '16 at 08:20
  • Indeed, use `$('whatever_selector').on('change', function() {....` or ...`on('click', function() {...` also you'll probably need to be familiar with `.checked` see this post: http://stackoverflow.com/a/7031408/2813224 – zer00ne May 13 '16 at 08:23
  • div.on('click', function() { //This is a click event delgated to the div div.css("background-color", "#333"); }); div.on('change', function () { div.css("background-color", "#fff"); }); Like that its not working? – Nick Audenaerde May 13 '16 at 08:26
  • `change` only works on form elements like checkbox, radio, textarea, etc.. Try using `$(this).css('background-color',....` – zer00ne May 13 '16 at 08:29
  • when i change it to: inputElement.on('change', function () { it still doesn't work, the inputElement in this case is the input field right? – Nick Audenaerde May 13 '16 at 08:31
  • Where are placing it? before or after it's gone? Also `change` will fire the function upon entering data to form element, then you must click *outside* of the element (that's called unfocus or blur event) – zer00ne May 13 '16 at 08:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111834/discussion-between-zer00ne-and-nick-audenaerde). – zer00ne May 13 '16 at 08:36