jquery - 在不同的div中迭代多个输入结果

Question

我用 3 个 div 做了 3 个不同的输入。输入中的数据从 wiki api 中提取图像。问题是如果我输入例如：input1：dog，input2：cat，input3：potato，我将得到3张与dog相同的图像，并且它会短暂显示cat和potato，但在所有3张中都相同。

很可能我迭代错误。这是代码笔：https ://codepen.io/visan90/pen/QByjKY

有人可以帮忙吗？提前谢谢各位！

<button onclick="imageWp()">Click me</button>
<input class='info' type="text">
<input class='info' type="text">
<input class='info' type="text">
<div class="viewer"></div>
<div class="viewer"></div>
<div class="viewer"></div>


function imageWp() {
  let arr = [];
  $(".info").each(function(x) {
    arr[x] = $(this).val();

    $.ajaxPrefilter(function(options) {
      if (options.crossDomain && jQuery.support.cors) {
        var https = window.location.protocol === "http:" ? "http:" : "https:";
        options.url = https + "//cors-anywhere.herokuapp.com/" + options.url;
      }
    });

    $.get(
      "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" +
      arr[x] +
      "&callback=?",

      function(response) {
        var m;
        var urls = [];
        var regex = /<img.*?src=\\"(.*?)\\"/gim;

        while ((m = regex.exec(response))) {
          urls.push(m[1]);
        }

        urls.forEach(function(url) {
          $(".viewer")
            .empty()
            .append('<img src="' + window.location.protocol + url + '">');
          if (i === 0) {
            return false;
          }
        });
      }
    );
  });
}

Answer 1

试试这个

请检查代码以获取评论。

function imageWp() {
  // To avoid lost of data, clear the viewer div before fetching data.
  // That's why I move this up here
  $(".viewer").empty();
  
  //This will be use to generate div name dynamically
  let divNo = 0;
  
  let arr = [];
  $(".info").each(function(x) {
    arr[x] = $(this).val();

    $.ajaxPrefilter(function(options) {
      if (options.crossDomain && jQuery.support.cors) {
        var https = window.location.protocol === "http:" ? "http:" : "https:";
        options.url = https + "//cors-anywhere.herokuapp.com/" + options.url;
      }
    });

    $.get(
      "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" +
      arr[x] +
      "&callback=?",

      function(response) {
        var m;
        var urls = [];
        var regex = /<img.*?src=\\"(.*?)\\"/gim;

        while ((m = regex.exec(response))) {
          urls.push(m[1]);
        }
        
        urls.forEach(function(url) {
        
        //To make each image appear in different div, put the image in a div and dynamically generate it's id for easy refrence
          $(".viewer")
            .append('<div id="innerviewer'+ divNo +'"><img src="' + window.location.protocol + url + '"></div>');
            
            //Increment the innerviewer div number
            ++divNo;
          if (i === 0) {
            return false;
          }
        });
      }
    );
  });
}

.viewer{
  display:inline;
}

<button onclick="imageWp()">Click me</button>
<input class='info' type="text">
<input class='info' type="text">
<input class='info' type="text">
<div class="viewer"></div>

我希望这会有所帮助并具有解释性。