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，因此它始终会运行。

此代码将解决这两个问题。此外，我还为图像添加了“标题”属性，因为您正在尝试将这些属性添加到数组中（尽管您可以保留一个简单的计数，但我认为您需要记录所选的卡片），并添加了图像来源，所以演示将起作用。

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>

我想可能还有其他一些改进 - 例如如果用户可能没有选择相同的卡两次等，但我会留给你，因为它在问题中没有说明。

P.S。关于语法错误：将来你可以登录浏览器的控制台（按F12在大多数浏览器中打开开发人员工具），这将显示错误消息，以帮助你诊断这样的事情，而不是只是想知道为什么不是'工作。您的浏览器有很多强大的工具可以帮助您测试和调试HTML，CSS和JavaScript。

点击3张图片后加载Ajax

1 个答案: