How to click and pick div elements in jQuery

Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pic开发者_运维百科k the highlighted profiles id and output them.

So my first question:

http://jsfiddle.net/5pZ2v/3/

How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?

Maybe there already exists a function for this or plugin?

Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button

Use something like this:

$('div.profile').click(function(){
    $(this).toggleClass('selected');
});

Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:

http://jsfiddle.net/Paulpro/apvqM/

Did you try .toggleClass()? i.e. create a css class highlight and add

 $("div").click(function () {
      $(this).toggleClass("highlight");
    });

HTH

Ivo Stoykov

PS: Look documentation here

You can use the click function of jQuery to mark/unmark a div.

 $("div.profile").click(function () {
     // if it's unmarked we mark
     if(!$(this).hasClass('selected'))
          $(this).addClass('selected');
     else
          $(this).removeClass('selected');
  }

You can then use each to get all the marked div :

$("div.selected").each(function () {
    // do what you want
});

For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)

http://jsfiddle.net/vol7ron/5pZ2v/8/

First you need to give your DIVs an ID then look at my Fiddle.

$("div").click(function () {
   $(this).toggleClass("highlight");
});

$('#save-button').click(function(){

    $('#output').html('');                           // clear the output div

    // Loop through each selected div and output it's ID
    $('div.highlight').each(function(){
       $('#output').append('<div>' + $(this).attr('id') + '</div>')
    });
});