0

تعريف متغير واستخدامه داخل وظيفة أخرى بواسطة جافا سكريبت

يوجد لدي سكربت قمت بتطويره يقوم بجلب أخر المشاركات من مدونات بلوجر أو اخر المشاركات من قسم معين

ما أريده هو التحكم في قيمة المعرف (demo)  وربطه بالمتغير printId الموجود ضمن الوظيفة createLastPosts

بحيث يتم استدعاء هذه الوظيفة مع تحديد المعرف اللى هيتم طباعة البيانات بداخلها حتى اتمكن من استخدام هذه الوظيفة عدة مرات وفي أماكن مختلفة

 function lastPosts(json) {
      var jfe = json.feed.entry;
      for (i = 0; i < jfe.length; i++) {
        var jfei = jfe[i];
        for (j = 0; j < jfei.link.length; j++) {
          if (jfei.link[j].rel == "alternate") {
            break;
          }
        }

        var postUrl = jfei.link[j].href;
        var postTitle = jfei.title.$t;

        var thumbnail;
        var thumbnailDefualt = "#";
        try {
          thumbnail = jfei.media$thumbnail.url;
        } catch (h) {
          s = jfei.content.$t;
          a = s.indexOf("<img");
          b = s.indexOf('src="', a);
          c = s.indexOf('"', b + 5);
          d = s.substr(b + 5, c - b - 5);
          if (a != -1 && b != -1 && c != -1 && d != "") {
            thumbnail = d;
          } else {
            thumbnail = thumbnailDefualt;
          }
        }

        var fixThumbnail = thumbnail.replace("s72-c", "s1600");

        var printThumbnail =
          '<a class="grid-thumbnail" href="' +
          postUrl +
          '"><img class="lazyload" loading="lazy" src="' +
          fixThumbnail +
          '" alt="' +
          postTitle +
          '"></a>';

        var printArticle =
          '<article class="grid-col article-posts swiper-slide"><div class="grid-fix-height"><div class="grid-box">' +
          printThumbnail +
          '<div class="grid-content"><h3 class="grid-title"><a href="' +
          postUrl +
          '">' +
          postTitle +
          "</a></h3></div></div></div></article>";
        var printall = document.getElementById("demo");
         printall.innerHTML += printArticle;
      }

     

    }

    function createLastPosts(url, count, printId) {
      var createScript = document.createElement("script");
      var createAttrSrc = document.createAttribute("src");
      createAttrSrc.value =
        url +
        "/feeds/posts/default?alt=json-in-script&max-results=" +
        count +
        "&callback=lastPosts";
      createScript.setAttributeNode(createAttrSrc);
      document.getElementsByTagName("head")[0].appendChild(createScript);
    }
    

    function createLastPostsLabel(url, labelName, count) {
      var createScript = document.createElement("script");
      var createAttrSrc = document.createAttribute("src");
      createAttrSrc.value =
        url +
        "/feeds/posts/default/-/" +
        labelName +
        "?alt=json-in-script&max-results=" +
        count +
        "&callback=lastPosts";
      createScript.setAttributeNode(createAttrSrc);
      document.getElementsByTagName("head")[0].appendChild(createScript);
    }



<div id="demo1"></div>
<div id="demo2"></div>

// أريد عند استدعاء الدالة

/*
createLastPosts(
	'url',  رابط المدونة
     'count',  عدد المقالات اللى هيتم طباعتها
     'printId'  المكان اللى هيتم طباعة فيه المقالات
);
*/

// مثال
createLastPosts(
	'https://mo-222.blogspot.com',
     '3',
     'demo1'
);

صورة للتوضيح


التعليق السابق
1
Elalfi_Web

يمكننا أن نقوم بإضافة خاصية باسم data-position في كل عنصر script وتحمل id الخاص بالعنصر الذي سيتم إضافة التدوينات فيه، بالشكل التالي:

function lastPosts(json) {
    // للحصول على الخاصية data-position من السكريبت الحالي (الذي قام بإستدعاء هذه الدالة)
    var ID = document.currentScript.getAttribute('data-position')
    
    //  ...
        var printall = document.getElementById(ID);
        printall.innerHTML += printArticle;
    }
}

function createLastPosts(url, count, printId) {
    // ...

    // إضافة الخاصية data-position ووضع قيمتها المكان الذي نريد عرض التدوينات فيه
    var createAttrPosition = document.createAttribute("data-position");
    createAttrPosition.value = `${printId}`
    createScript.setAttributeNode(createAttrPosition);

    document.getElementsByTagName("head")[0].appendChild(createScript);
}

ثم يتم إستدعاء الدالة createLastPosts بنفس الطريقة:

<div class="container">
    <div class="wrapper">
        <div class="content">
            <div id="demo1" class="show-sidebar grid grid-3"></div>
            <div id="demo2" class="show-sidebar grid grid-3"></div>
            <div id="demo3" class="show-sidebar grid grid-3"></div>
        </div>
    </div>
</div>
<script>
    createLastPosts('https://mo-222.blogspot.com', '1', 'demo1');
    createLastPosts('https://mo-222.blogspot.com', '2', 'demo2');
    createLastPosts('https://mo-222.blogspot.com', '3', 'demo3');
</script>

بهذا الشكل سوف يتم إضافة التدوينات في المكان الصحيح.

0
mohamed_refat

تابعت الحل على تعليقك السابق في أكاديمة حسوب وبجد ده أفضل حل مناسب شكراً لك