使用 jQuery 的切换元素的正确条件

Proper conditional for a toggled element with jQuery

本文关键字：元素 条件 jQuery 使用      更新时间：2023-09-26
$(document).ready(function() {
    $(".media").hide();
    $(".infobox").click(function(event) {
        var isVisible = $("."+event.currentTarget.id).is(":visible");
        if(isVisible) {
            $("."+event.currentTarget.id).slideToggle(100);
        }
        else {
            $("."+event.currentTarget.id).slideToggle(100);
            $("#media"+event.currentTarget.id).load("/mediabox/"+event.currentTarget.id);
        }
    });
});

当用户单击一个元素时，我想切换一个框来显示，然后使用 ajax 加载一些内容。这一切都很好。但是当它再次被单击时，我希望它切换以隐藏并且不再加载内容。

就像目前一样，它将切换取消隐藏并加载 ajax。再次单击时，它只是重新加载 ajax，元素仍然可见。

对于

这个javascript新手的任何指导将不胜感激。

$(function () {
    var isEverLoadContent = false;
    $('.media').hide();
    // your code above
    else {
        if (!isEverLoadContent) {
            // Perform ajax request
            // if done set to true
            isEverLoadContent = true;
        }
        // Your next task
    }
    // Continue your code
});

我重新创建了您的问题，以直观地演示如何根据您的要求制作事件。在我的示例中，div 只会在第二次单击时变大，但在任何其他单击时都不会变大。您可以将其应用于您的加载问题。这个过程就是我喜欢称之为标记的。 它与设置变量有关，以便您可以控制函数或语句的流程

$(document).ready( function(){
  var happend = false;
  $("div").click(function(event){
    if($(this).css("background-color") != "rgb(0, 128, 0)" ){
      $(this).css("background-color", "green")
      console.log($(this).css("background-color"))
      // happend = false
    }else{
      $(this).css("background-color", "blue")
      if(!happend){
        $(this).animate({"height" : "+=50"})
        happend = true
      }
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>button</div>

我没有测试它，因为我现在无法进入 AJAX。但我想知道它是否适合你或给你一些想法。它可能不适合你，因为我没有研究你的代码所做的一切，但你可以根据自己的喜好调整模式。

$(document).ready(function(){
    var happend =false;
    $(".media").hide();
  $(".infobox").click(function(event){
        var isVisible = $("."+event.currentTarget.id).is(":visible");
        if ( isVisible ) {
            $("."+event.currentTarget.id).slideToggle(100);
        }
        else {
            $("."+event.currentTarget.id).slideToggle(100);
            if(!happend){
                 $("#media"+event.currentTarget.id).load("/mediabox/"+event.currentTarget.id);
                 happend = true
            }
        }
    });
});

您可以使用计数器/布尔值，当显示元素时，检查计数器/布尔值的值。如果计数器/布尔值仍然等于它的原始值，则加载 ajax 并更改它的值。或者，您可以在第一次加载 ajax 时向元素添加数据属性，然后在显示元素时始终检查该数据属性是否存在。如果存在，请不要加载 ajax 数据。

http://codepen.io/partypete25/pen/EKmyNb

if (!$div.data("loaded")) {
    $div.data("loaded", true);
    //load ajax data
  }
相关文章：