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

Mohamed Refaat10 · 26 ديسمبر 2021

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

ما أريده هو التحكم في قيمة المعرف (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'
);

last-post.html

تم التعديل في 26 ديسمبر 2021 بواسطة Mohamed.Refaat

سامح أشرف · 27 ديسمبر 2021

لكي يتم إضافة التدوينات في الأقسام المحددة، تحتاج إلى تعديل الدالة lastPosts و الدالة createLastPosts وكذلك تحتاج إلى إنشاء مصفوفة عامة global بالشكل التالي:

var IDs = [];

function lastPosts(json) {
    var ID = IDs.shift();	// للحصول على أول عنصر في المصفوفة وحذفه من المصفوفة الأصلية
    // ...
    var printall = document.getElementById(ID);
    printall.innerHTML += printArticle;
}

function createLastPosts(url, count, printId) {
    IDs.push(printId);	// لإضافة عنصر جديد إلى المصفوفة
  
    // ...
}

الآن يمكنك أن تقوم بتشغيل الدالة 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>

61ca1a1b0a616_Screenshot2021-12-27215455.png.a8983932a5a24dc41c9f7132a047e498.png

طريقة أفضل

لكن الطريقة السابقة متوقفة على ترتيب تنفيذ السكريبتات في المتصفح ولا يمكننا أن نضمن أن يتم تنفيذهم بالترتيب (قد يقوم المتصفح بتنفيذ السكريبتات حسب سرعة تحميل كل سكريبت) وبالتالي يمكن أن نجد أن التدوينات يتم إضافتها في أماكن عشوائية، ولحل هذه المشكلة يمكن أن تقوم بتجربة طريقة مختلفة عن إستخدام مصفوفة عامة، حيث نقوم بإضافة خاصية باسم 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) {
    // ...

ثم يتم إستدعاء الدالة 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>

الملف بعد تعديله:

last-post.html

تم التعديل في 27 ديسمبر 2021 بواسطة سامح أشرف
إضافة طريقة أخرى لحل المشكلة

Mohamed Refaat10 · 28 ديسمبر 2021

@سامح أشرف

مش عارف أقول لحضرتك إيه وأشكرك إزاي ، حليت لي مشكلة بقالي شهور بحاول أحلها لكن مقدرتش اتوصل لأي حل مناسب

شكراً بجد

Mohamed Refaat10 · 22 يناير 2022

@سامح أشرفإزاي أقدر استدعي مقالات بطريقة عشوائية بنفس الأكواد الموجودة في الملف التالي

بتاريخ On 12/27/2021 at 21:55 قال سامح أشرف:

last-post.html

حاولت استخدم دالة Math.random ودالة Math.floor لكن مش عارف استخدمها بطريقة صحيحة مع بلوجر

سامح أشرف · 23 يناير 2022

بتاريخ 16 ساعات قال Mohamed.Refaat:

@سامح أشرفإزاي أقدر استدعي مقالات بطريقة عشوائية بنفس الأكواد الموجودة في الملف التالي

حاولت استخدم دالة Math.random ودالة Math.floor لكن مش عارف استخدمها بطريقة صحيحة مع بلوجر

إن أردت توليد رقم عشوائي للحصول على عدد من التدوينات فيمكنك أن تقوم به بالشكل التالي:

createLastPosts('https://mo-222.blogspot.com', Math.floor(Math.random()*10).toString(), 'demo3');

بهذا الشكل سوف يتم توليد رقم عشوائي ما بين 0 و 10 وتحويل الرقم إلى نص String

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

السؤال

Mohamed Refaat10

4 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

طريقة أفضل

Mohamed Refaat10

Mohamed Refaat10

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية