Question

$(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 newb的任何指导都将不胜感激。

Answer 1

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

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

if (!$div.data("loaded")) {
    $div.data("loaded", true);
    //load ajax data
  }

Answer 2

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

Answer 3

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>button</div>

＆＃13;

我没有测试它，因为我现在无法进入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
            }

        }

    });

});

使用jQuery对切换元素进行适当的条件处理

3 个答案: