简体   繁体   中英

detect if a class is clicked using jquery

 $(".Personalized").click(function(){

    $.ajax({

        type:"POST",
        url:"personalized.php",
        cache:false,
        beforeSend: function(){
            $('#loading_personalized').show();
            $('#triangle-personalized').show();
        },

        complete: function(){
            $('#loading_personalized').hide();

        },
        success: function(html){


            $("#divPersonalized").html(html).show();
        }

    });

});

when i click on personalized class the divPersoanlized shows up,,now i want to hide it on again clicking on personalized..how can i do it...

Normally you'd just use toggle() to toggle the element, but in this case you probably don't want to run the ajax call every time

$(".Personalized").click(function(){

    if ( $("#divPersonalized").is(':visible') ) {

        $("#divPersonalized").hide();

    } else {

        $.ajax({
            type:"POST",
            url:"personalized.php",
            cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                $("#divPersonalized").html(html).show();
            }
        });
    }
});

For example like this:

$(".Personalized").click(function () {

    var $divPersonalized = $("#divPersonalized");

    if ($divPersonalized.is(':hidden')) {
        $.ajax({
            // ...
            success: function (html) {
                // Show the div
                $("#divPersonalized").html(html).show();
            }
        });
    }
    else {
        // Hide the div
        $divPersonalized.hide();
    }
});

You can check if div is visible just hide it. You don't need to call the ajax

$(".Personalized").click(function(){
    //You can use also use $(this).is(':visible')
    if($(this).css('display') !== "none"){
        $(this).hide();
        return;
    }

    //Your ajax code
});

To use the visible selector in jquery. visible doc.

You can try this:

$(".Personalized").click(function(){


            if($('#divPersonalized').is(':visible')) {

                    $('#divPersonalized').hide();

            } else {

                 $.ajax({  

                      ...
                      ...
                        success: function(html){
                          $("#divPersonalized").html(html).show();
                        }
                      ...
                      ...
                 });
            }

});

You can use toggle method:

 $(".Personalized").toggle(ShowFunction, HideFunction);

    function ShowFunction(){
     // your code goes here
     $.ajax({
            type:"POST",
            url:"personalized.php",
            cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                $("#divPersonalized").html(html).show();
            }
        });
    }

    function HideFunction(){
     // your code goes here.
      $("#divPersonalized").hide();
    }

Use this:

if($("#divPersonalized").attr("hidden")=="hidden")
{
    $("#divPersonalized").removeAttr("hidden");
}
else
{
    $("#divPersonalized").attr("hidden","hidden");
}

Demo

Update

I updated the Demo.

Throwing into the mix, example of separating the concerns ( subjective ) - worth a look.

(function() { /* wrap it to protect globals - optional */

   /* 1) set some variables accessible to all functions, eg */

    var contentdiv = $("#divPersonalized"), /* cache reused static selector(s) */
    hasdataloaded = false;

    /* 2) create a function to handle the data requests */

    function loaddata() {

        $.ajax({
            type:"POST", url:"personalized.php", cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                hasdataloaded = true; /* updated the status */
                contentdiv.html(html);
            }
        });
    }

   /* 3) A function to handle the show and hide and checki if data has loaded */
       function toggleDataDiv() {
          contentdiv.toggle(); /* showhide */
          if(!hasdataloaded) {  loadData(); } /* only want to load once */
       } 

    /* 4) the event handler */
    $(".Personalized").click(function(){ toggleDataDiv();  });

   /* attach more events to other elements eg */
    $(".someotherelement").click(function() { toggleDataDiv();  });


})();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM