点击3张图片后的Ajax加载

Question

I am trying create deck of Tarot cards. The ajax code below work if I click just on one card, but I need the function start after clicking on specific number of cards.

<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>

I tried to do something like this, but it does not work.

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

Answer 1

You have two problems

1) A small syntax error due to an extra closing bracket, which will cause the script not to run at all.

2) The logic is wrong, in that it waits until the 4th image is clicked before trying to load the external content, whereas it needs to check immediately after the 3rd one is loaded. The else should be another if , so it always runs.

This code will fix both issues. Also I added "title" attributes to the images, since you're trying to add those to the array (although you could just keep a simple count, but I figured you'd want a record of the selected cards), and added image sources so the demo will work.

 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> 

I guess there may be other improvements to make as well - eg if the user may not select the same card twice etc, but I'll leave that to you, since it's unspecified in the question.

PS Regarding the syntax error: In future you can check in your browser's Console (press F12 to open the Developer Tools in most browsers) which will show you error messages to help you diagnose things like this, rather than just being left wondering why something isn't working. Your browser has a wealth of powerful tools to help you test and debug your HTML, CSS and JavaScript.