تكرار نتائج المدخلات المتعددة في divs مختلفة

0

لقد قدمت 3 مدخلات مختلفة مع 3 div. يتم سحب البيانات الموجودة في المدخلات من صورة ويكي ويكي. تكمن المشكلة في أن أضع على سبيل المثال في: input1: dog ، input2: cat ، input3: potato ، سأحصل على 3 صور متشابهة تمامًا مع dog ، كما أنها تظهر لحظة وجيزة للقطط والبطاطس ولكن نفس الشيء في الكل 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;
          }
        });
      }
    );
  });
}

1 إجابة

0

جرب هذا

يرجى التحقق من الرمز للتعليق عليه.

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>

آمل أن تكون هذه المساعدة وشرح كيندا.

:مؤلف
فوق
قائمة طعام