jQuery从Pokemon TCG API拉取数据生成可点击元素开发求助

一、现有代码逻辑修复 #

你当前代码的循环条件存在错误：for (var i = 0; i < pokemon.length; i++) 里的pokemon是你输入的搜索关键词，pokemon.length是关键词的字符长度，和API返回的卡牌数量完全不匹配，会导致遍历次数错误、甚至索引溢出报错，需要替换为response.data.length（即API返回的卡牌数组的实际长度）。

二、可点击元素生成与多数据展示实现 #

按照你要求的「每个可点击元素包含展示名称、自定义属性值」的规则，修正后的完整代码如下：

$(document).ready(function (e) {
  $("#TheSubmitButton").on("click", function(event){
    $("#card-container").empty();
    event.preventDefault();

    var pokemon = $("#searchInput").val().trim();

    $.ajax({
      method: "GET",
      url: "https://api.pokemontcg.io/v2/cards?q=name:" + pokemon
    }).then(function(response){
      // 用API返回的卡牌数组长度作为遍历上限
      for (var i = 0; i < response.data.length; i++) {
        var currentCard = response.data[i];
        // 生成可点击元素，这里用button标签，也可根据需求替换为a标签
        var clickableCard = $("<button class='pkmn-card-btn'></button>");
        // 存储自定义属性值：这里存的是卡牌唯一ID，你可以替换为任意你需要的字段值
        clickableCard.attr("data-card-id", currentCard.id);
        
        // 组装可点击元素内的展示内容
        // 1. 卡牌图片
        var cardImg = $("<img class='pkmn-card'>");
        cardImg.attr({
          "src": currentCard.images.small,
          "alt": currentCard.name
        });
        // 2. 展示名称：卡牌名称
        var cardName = $("<p class='pkmn-card-name'></p>").text(currentCard.name);
        // 3. 额外展示字段：稀有度
        var cardRarity = $("<p class='pkmn-card-rarity'></p>").text(currentCard.rarity || "无稀有度标注");

        // 把内容拼接到可点击元素内，再插入到页面容器
        clickableCard.append(cardImg, cardName, cardRarity);
        $("#card-container").append(clickableCard);
      }

      // 绑定可点击元素的点击事件
      $(".pkmn-card-btn").on("click", function() {
        // 取出之前存储的自定义属性值
        var targetCardId = $(this).attr("data-card-id");
        alert("你点击了ID为" + targetCardId + "的宝可梦卡牌");
        // 这里可以扩展你需要的交互逻辑，比如弹出详情、跳转页面等
      });
    });
  });
});

实现说明 #

• 只要API返回的卡牌数量≥4，就会自动生成至少4个符合要求的可点击元素
• 你可以自行替换自定义属性的存储值，比如把data-card-id的取值换成卡牌大图地址、稀有度、所属卡包编号等，只要从currentCard对象里取对应字段即可
• 所有API返回的字段都可以直接取用来展示，你之前打印的console.log(response.data)里的所有字段都支持直接调用，比如currentCard.supertype（卡牌类型）、currentCard.set.name（所属卡包名称）等
• 你可以自行添加CSS样式调整可点击元素的展示效果，比如移除按钮默认边框、调整排版布局等

内容的提问来源于stack exchange，提问作者MoxOnCrocs