Using click events to change the div in “focus”?

Question

I'm trying to use jQuery to highlight a div that's clicked on and keep it that way until one of a few other divs are clicked on. JSfiddle

All of the CSS and HTML are fine; if I manually change the ids and classes of the wrapper divs, they work as expected. However, the jQuery code doesn't seem to work:

var $allWraps = $("#mainBody .wrap");

$allWraps.each(function () {
    $(this).on("click", ".kid ", function () {
        setFocus($(this));
    });
});

function setFocus(f) {
    $allWraps.each(function () {
        $(this).each(function () {
            $(this).removeAttr(" id ");
            $(this).addClass(" unfocused ");
        });

        f.attr(" id ", " focused ");
        f.removeClass(" unfocused ");
    });
}

I'm not 100% sure i'm using the .each() function correctly, or if I have the correct syntax for using DOM object parameters in a function.

Answer 1

See http://jsfiddle.net/9n93wyrq/6/

Use class name for focus and unfocus, not the id. also f is your kid , so you need to add "focused" to its parent.

function setFocus(f) {
    $allWraps.each(function () {
        $(this).each(function () {
            $(this).removeClass("focused").addClass("unfocused");
        });
    });

    $(f).parent().removeClass("unfocused").addClass("focused");
}

Answer 2

No need for IDs or loops. Also IDs in a page should be unique, so changing the ID around isn't a good idea. Here is a simple example:

JSFiddle: http://jsfiddle.net/66v68qbL/

var $allWraps = $("#mainBody .wrap");
var $allKids = $("#mainBody .kid");

// If you need the whole wrap to be clickable.
$allWraps.on('click', function(e) {  
  $allWraps.removeClass('focused').addClass('unfocused');
  $(this).removeClass('unfocused').addClass('focused');
});

// If you need only the '.kid' divs to be clickable.
$allWraps.on('click', '.kid', function(e) {
  $allWraps.removeClass('focused').addClass('unfocused');
  $(this).parent().removeClass('unfocused').addClass('focused');
});

Answer 3

You dont need to use the loop at all. http://jsfiddle.net/9n93wyrq/11/

$('.wrap').on('click',function(){
  $('#focused').addClass('unfocused')
  $('#focused').removeAttr('id')
  $(this).attr('id',"focused")
  $(this).removeClass('unfocused')
})

Answer 4

There was several place to change for the script to work, as well as a parse error line 16 (you cannot put spaces in the attr name)

Here's a working javascript :

var $allWraps = $("#mainBody .wrap");

$allWraps.each(function () {
    $(this).on("click", function () {
        setFocus($(this));
    });
});

function setFocus(f) {
    $allWraps.each(function () {
            $(this).removeAttr(" id ");
            $(this).addClass(" unfocused ");
    });
    f.attr("id"," focused ");
    f.removeClass(" unfocused ");
}

Please see the Jsfiddle

Answer 5

I wrapped your items in labels of radio buttons to avoid jQuery.

CSS

#mainBody input[type="radio"] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}
.wrap .kid {
    background: gray;
}
.wrap, .wrap .kid {
    border: 2px solid gray;
}
:checked + .wrap, :checked + .wrap .kid {
    border: 2px solid black;
}

Working Fiddle

Updated

If you want to show the color also on focus. Fiddle

Answer 6

var $allWraps = $(".wrap");

$allWraps.each(function (index, element) {

  $(element).on("click", ".kid ", function () {
    $allWraps.addClass("unfocused");
    $allWraps.removeAttr("id");

    $(element).removeClass("unfocused");
    $(element).attr("id", "focused");
  });
});