Javascript 单击3个图像后加载Ajax

我正在尝试制作一副塔罗牌。如果我只单击一张卡，下面的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>

$（文档）.ready（函数（）{
$（“.card”）。单击（函数（）{
$（“#div1”）.load（“data.php”）；
});
});

我试着做类似的事情，但没有成功

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

var数组=[]；
$（文档）.ready（函数（）{
$（“.card”）。单击（函数（）{
if（数组长度<3）{
array.push（$（this.attr（'title'））；
}否则{
$（“#div1”）.load（“data.php”）；
}
}
});
});

您有两个问题

1） 由于额外的右括号而导致的一个小语法错误，这将导致脚本根本无法运行

2） 这种逻辑是错误的，因为它在尝试加载外部内容之前会等待第四个图像被单击，而在加载第三个图像之后需要立即进行检查。

else

应该是另一个

if

，因此它总是运行

此代码将修复这两个问题。此外，我还为图像添加了“title”属性，因为您正试图将这些属性添加到阵列中（虽然您可以只进行简单的计数，但我认为您需要所选卡的记录），并添加了图像源，以便演示能够正常工作

var数组=[]；
$（文档）.ready（函数（）{
$（“.card”）。单击（函数（）{
//如果还不是第三个元素，则添加到数组中
if（数组长度<3）{
array.push（$（this.attr（'title'））；
警报（“到目前为止已选择“+array.length+”卡”）；//仅用于演示
}
//现在马上检查我们是否已经到达第三个
if（array.length==3）{
警报（“立即加载数据”）；
//$（“#div1”）.load（“data.php”）；//对演示进行了注释，以避免出现错误
}
});
});
.card{
光标：指针；
}

我认为，您可以实现一个计数器，而不是数组[]。。。您的代码似乎工作得很好……如果这不是您想要的行为，您必须更加具体。“不起作用”意味着一个错误，但没有错误（除了上面示例中的一个额外括号，我假设它是一个拼写错误，并已删除），但它并没有给我们多少线索。也许您希望在单击第三个图像后立即加载ajax内容，而不是等到他们尝试单击第四个图像后再加载？这就是你的意思吗？也许像这样？这个脚本实际上根本不起作用，它什么都不做。你指的是哪个括号？是的，我想在点击第三张图片后立即加载ajax内容。“这个脚本实际上根本不起作用，它什么都不做。”是的，因为额外的括号会导致语法错误。您可以通过查看浏览器的控制台来检查，它会显示错误。如果你检查我的第一个链接，你会看到一个工作版本，删除了额外的括号。是的，现在正在工作。非常感谢。