Using Jquery, create function to determine clicked class

Question

i'm new to jquery. I have a map, and some selection images(with color, not outline), and i need to use checkbox_click to save the checked area. -> Choose the color on the left side first, and check the map at the right side. then show that color's image on that checked area.

<div class="color_area">
  <div class="yellow"></div>
  <div class="purple"></div>
</div>

<input type="checkbox" class="hidden_input checkbox_click1" name="mcans1" id="mcans1" value="1" rhandle="yellow">
<input type="checkbox" class="hidden_input checkbox_click1" name="mcans1" id="mcans2" value="1" rhandle="purple">

<div class="click">
  <div class="click_yellow checkbox_click checkbox_click1" id=yellow" handle = "mcans1"  handle_name="mcans1"><img src="images/yellow1.png" id="yellow"></div>
  <div class="click_purple checkbox_click checkbox_click1" id="purple" handle = "mcans1"  handle_name="mcans1"><img src="images/purple1.png" id="purple"></div>
</div>

i need to create a function() for determine which color have clicked, and a function() for clear pre-color image when clicked another color.

function color_section(color){
    var color_class  = $('div').attr('class');
    var color = "." + color_class;

    if(color == '.yellow'){
        return 1;
    }
    if(color == '.purple'){
        return 2;
    }
}

i don't know how can checkbox_click know the color i've click.

$('.yellow').click(function(){      
  //Do this first
   $('.checkbox_click1').click(function(){
    //find('img.yellow') then   
       });
});

i have no idea what to do. Somebody help me, please..

Jérémy Dutheil · Accepted Answer · 2013-11-22 08:59:55Z

0

If I understand your problem, you want to click on one checkbox (for example yellow), and show the linked image, is that it ? By using jQuery, it's pretty easy :

$( ".checkbox_click1" ).on( "click", function() {
    var color = $( this ).attr( "rhandle" );
    var divToShowId = "#" + color;

    $( divToShowId ).show();
});

Please see the fiddle : http://jsfiddle.net/868p2/

With $( this ) inside your callback function, you can access the selected element ; then, you can get the color id and open the div with it. If you want to show/hide depending on the current status, a simple condition will do it.

EDIT : okay, I understand better your problem now ; I edited my fiddle with your HTML code and the JS functions. I slightly updated your HTML, for example by changing color classes for data-color attributes, what would be more meaningfull (see this article about data attributes)

I decided to separate the click event on the div from the click event on the checkboxes ; instead of binding an event to the checkbox when the div is clicked, I decided to bind it directly. In order to know if we can do the actions (ie, the checkbox is on the selected div, we have the right to click on it), we will use a selected class that we would add to the checkbox itself.

So here is the code :

$( ".color_area div" ).on( "click", function() {
    // Choose the color by clicking a div
    // Save in any var you need
    var color = $( this ).attr( "data-color" );

    // Here, we manage the class that will help us to trigger checkboxes click
    $( ".checkbox_click1" ).each( function() {
        var forColor = $( this ).attr( "rhandle" );

        if( forColor == color ) {
          $( this ).addClass( "selected" );   
        } else {
            $( this ).removeClass( "selected" );
        }
    });
});

$( ".checkbox_click1" ).on( "click", function() {
    // Verify it's selected
    if( $( this ).hasClass( "selected" ) ) {
        var color = $( this ).attr( "rhandle" );

        // Clear present imgs
        $( "#" + color + " img" ).each( function() {
            $( this ).remove();
        });
    }
});

And the updated fiddle : jsfiddle

edited Nov 22, 2013 at 8:59

answered Nov 21, 2013 at 13:49

Jérémy Dutheil

6,1477 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3017670 Over a year ago

i'm sorry that my fair english: i need to click #yellow first since i have to choose the color, and then click the checkbox_click, it will link to checkbox_click1#yellow to find the correct images. i think the html have wrong, do you have any idea? i need to connect the div because i have to save that color on that checkbox_click

user3017670 Over a year ago

hi, i have a problem in $(".checkbox_click1").each(function(){}); it can addClass "Selected", but in $( ".checkbox_click1" ).on( "click", function() {}); it didn't get into if( $( this ).hasClass( "selected" ) ) I don't know why..

Jérémy Dutheil Over a year ago

It should work, please verify the letter case (you say addClass Selected (with an uppercase), but you check selected (without uppercase) )

user3017670 Over a year ago

i'm sorry i type wrong here, but it's letter case. it's strange that has add the class but not go inside hasClass

Jérémy Dutheil Over a year ago

Please post your code to a fiddle, so I can see what's going wrong

|

Collectives™ on Stack Overflow

Using Jquery, create function to determine clicked class

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related