使用jQuery檢測是否單擊了一個類

Question

 $(".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();
        }

    });

});

當我單擊個性化課程時，將顯示divPersoanlized，現在我要再次單擊個性化時將其隱藏。我該怎么辦...

Answer 1

通常，您只需要使用toggle()來切換元素，但是在這種情況下，您可能不想每次都運行ajax調用

$(".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();
            }
        });
    }
});

Answer 2

例如這樣：

$(".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();
    }
});

Answer 3

您可以檢查div是否可見，只需將其隱藏即可。 您不需要調用ajax

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

    //Your ajax code
});

Answer 4

在jquery中使用可見選擇器。 可見文檔

您可以嘗試以下方法：

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


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

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

            } else {

                 $.ajax({  

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

});

Answer 5

您可以使用切換方法：

 $(".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();
    }

Answer 6

用這個：

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

演示

更新

我更新了演示。

Answer 7

投入討論， 分離關注點的示例（主觀）-值得一看。

(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();  });


})();