ansaurus

Question

Jquery how to append and remove on a div click event

Answer 1

A:

I like to Keep other functions in separate block from one handling ready event.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
    var divs = new Object();

    function click(event){
        var did=event.target.id;

        if($("#"+did).css('backgroundColor') == 'yellow')
            divs[did]=true;
        else
            divs[did]=false;

        AppendText();
    }
    function AppendText(){
       var txt="";
        for(var x in divs)
            if(divs[x]==true)
              txt +=x+",";

        $('#p1').html(txt);
    }      
</script>

Now hookup clicks.

<script type="text/javascript">
    $(document).ready(function() {
      $('div.click').click(function() {
        var bg = $(this).css('backgroundColor');
        $(this).css({backgroundColor: 
                bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 
              'transparent' : 'yellow'});
      });
        $('#div1').bind('click', divclick);
        $('#div2').bind('click', divclick);
        $('#div3').bind('click', divclick);
    });
</script>

TheVillageIdiot 2009-07-10 03:24:04

Thanks for your reply. In your example clicking on the div to remove the highlight doesn't remove the ID from the html but it does prevent another ID from being appended. Can you show how to remove as well?

2009-07-10 03:31:19

Answer 2

+5 A:

It's a little cleaner to use a CSS class instead of changing the styling directly. That way you can take advantage of the handy toggleClass function to turn the highlighting on and off. It's also easy to test if a div is highlighted: div.is(".highlighted") or div.hasClass("highlighted") will tell ya.

<script type="text/javascript">
  $(document).ready(function() {
    $('div.click').click(function() {
      $(this).toggleClass('highlighted');
    });
  });

  $(function() {
    // Can use one CSS selector to find all three divs and bind them all at once.
    $('#div1, #div2, #div3').bind('click', click);
  });

  function click() {
    var p1 = $("#p1");

    if ($(this).is(".highlighted")) {
      p1.append(this.id + ",");
    }
    else {
      p1.text(p1.text().replace(this.id + ",", ""));
    }
  }

</script>

<style type="text/css">
  .highlighted {
    background: yellow;
  }
</style>

John Kugelman 2009-07-10 03:33:32

John, thanks a lot!

2009-07-10 03:38:28

ansaurus

tags:

views:

answers:

Jquery how to append and remove on a div click event

related questions