点击3张图片后的Ajax加载

Question

我正在尝试创建塔罗牌卡片组。 如果仅单击一张卡，下面的ajax代码可以工作，但是单击特定数量的卡后，我需要启动该功能。

<div id="div1">
<img class="card">
<img class="card">
<img class="card">
<img class="card">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".card").click(function(){
        $("#div1").load("data.php");
    });
});
</script>

我试图做这样的事情，但是没有用。

var array = [];
$(document).ready(function(){
$(".card").click(function(){
    if(array.length < 3){
        array.push($(this).attr('title'));
    } else { 
       $("#div1").load("data.php");
    }
}
  });
});

Answer 1

你有两个问题

1）由于有一个多余的右括号引起的小语法错误，这将导致脚本根本无法运行。

2）逻辑是错误的，因为它一直等到单击第4张图像后才尝试加载外部内容，而它需要在加载第3张图像后立即进行检查。 else应该是另一个if ，因此它将始终运行。

此代码将解决这两个问题。 另外，我还向图像添加了“ title”属性，因为您试图将它们添加到数组中（尽管您可以保留一个简单的计数，但我想您希望记录所选卡），并添加了图像来源，因此该演示可以正常工作。

 var array = []; $(document).ready(function() { $(".card").click(function() { //if not the 3rd element yet, add to the array if (array.length < 3) { array.push($(this).attr('title')); alert("Selected " + array.length + " cards so far"); //just for demo } //now check immediately if we've reached the 3rd one if (array.length == 3) { alert("load data now"); //$("#div1").load("data.php"); //commented for demo to avoid an error } }); }); 

 .card { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1"> <img class="card" title="A" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" /> <img class="card" title="B" src="https://www.gstatic.com/webp/gallery/2.sm.jpg" /> <img class="card" title="C" src="https://www.gstatic.com/webp/gallery/3.sm.jpg" /> <img class="card" title="D" src="https://www.gstatic.com/webp/gallery/4.sm.jpg" /> </div> 

我想可能还会有其他改进-例如，如果用户可能没有两次选择同一张卡，等等，但是我会把它留给您，因为问题中未指明。

PS关于语法错误：将来您可以在浏览器的控制台中登录（按F12键以在大多数浏览器中打开开发人员工具），该控制台将向您显示错误消息，以帮助您诊断类似的事情，而不仅仅是让您怀疑为什么不这样做没有工作。 您的浏览器具有许多强大的工具，可帮助您测试和调试HTML，CSS和JavaScript。