jquery click function select & deselect

Question

I need some help with this jQuery code. I have a SVG map, and I need a to select a country with one click, and deselect it with another one. Can somebody help me ? :) This is the code:

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {




 $("path").mouseover(function() {
     $(this).css('cursor', 'pointer');$(this).attr({
    fill: "#FF0000",
    stroke: "#00FF00"
     });
     $(this).css('cursor', 'pointer');
    })
 .mouseout(function(){
     if(!$(this).data('clicked')){
       $(this).attr({
    fill: "#FFFFFF",
    stroke: "#eee"
    });
    } 
  });


$("path").click(function() {
$(this).attr({
    fill: "#FF0000",
    stroke: "#00FF00"
});
$(this).data('clicked', true); 

});

});
});//]]>  

</script>

You don't explain what is the problem or error you are getting, this is a poor question, just pasting code. — Nelson, Sep 15 '12 at 16:36

score 2 · Answer 1 · answered Sep 15 '12 at 16:33

2

The most emphatic approach would be to use: http://api.jquery.com/toggle-event/

answered Sep 15 '12 at 16:33

Matt Whipple

7,034
1
23
34

I have solved this problem with custom code before, but I didn't know about 'toggle()' until today. Why is it marked deprecated, though? – jimp Sep 15 '12 at 16:45
whoops...that's not too visible on the doc page. Check here: http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions – Matt Whipple Sep 15 '12 at 16:48

score 0 · Answer 2 · edited Sep 16 '12 at 14:49

You might be adding some class when selecting and then removing the class when deselecting

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
     <input type='text' id="text1" onclick='javascript:toggleClass(this)' />
 </body>
 </html>
 <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
 <script language='javascript' type="text/javascript">


 function toggleClass(item) {

    if ($(item).hasClass('select')) {
        $(item).removeClass('select').addClass('deselect');
    }
    else {
        $(item).removeClass('deselect').addClass('select');
    }

  }
 </script>

jquery click function select & deselect

2 Answers2