[英]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();
}
});
});
当我单击个性化课程时,将显示divPersoanlized,现在我要再次单击个性化时将其隐藏。我该怎么办...
通常,您只需要使用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();
}
});
}
});
例如这样:
$(".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();
}
});
您可以检查div是否可见,只需将其隐藏即可。 您不需要调用ajax
$(".Personalized").click(function(){
//You can use also use $(this).is(':visible')
if($(this).css('display') !== "none"){
$(this).hide();
return;
}
//Your ajax code
});
在jquery中使用可见选择器。 可见文档
您可以尝试以下方法:
$(".Personalized").click(function(){
if($('#divPersonalized').is(':visible')) {
$('#divPersonalized').hide();
} else {
$.ajax({
...
...
success: function(html){
$("#divPersonalized").html(html).show();
}
...
...
});
}
});
您可以使用切换方法:
$(".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();
}
用这个:
if($("#divPersonalized").attr("hidden")=="hidden")
{
$("#divPersonalized").removeAttr("hidden");
}
else
{
$("#divPersonalized").attr("hidden","hidden");
}
更新
我更新了演示。
投入讨论, 分离关注点的示例(主观)-值得一看。
(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(); });
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.