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

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

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

صورة للتوضيح

var ID = "demo";

function lastPosts(json) {
  // ...
  
  // نستخدم المتغير ID العام هنا
  var printall = document.getElementById(ID);
  printall.innerHTML += printArticle;
}

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

function createLastPostsLabel(url, labelName, count) {
  // ...
}

وعندما تقوم تريد تغير المكان المستخدم لعرض المقالات، فيمكنك أن تغير قيمة ID :

ID = 'demo1';
createLastPosts('https://mo-222.blogspot.com', '3');

ID = 'demo2';
createLastPosts('https://mo-222.blogspot.com', '5');

أو يمكنك أن تعدل على الدالة createLastPosts لتغير قيمة المتغير ID من داخلها حسب قيمة المعامل printId :

function createLastPosts(url, count, printId) {
    ID = printId;
    // ...
}

// يتم إستخدام الدالة بهذا الشكل
createLastPosts('https://mo-222.blogspot.com', '3', 'demo1');
createLastPosts('https://mo-222.blogspot.com', '5', 'demo2');

Mohamed Refaat

2021-12-27T08:33:08+00:00
المزيد
- رابط مختصر

أولاً شكراً على ردك

جربت كل الحلول دي لكن المشكلة بيتم طباعة كل البيانات في أخر مكان تم تحديده ، لو مستخدم الدالة أكثر من مرة ، أنا عايز استخدم الدالة اكثر من مرة في نفس الصفحة مع تحديد مكان معين هيتم طباعة البيانات فيه ، يعني كل ما استخدم الدالة هحدد مكان معين هيتم طباعة البيانات فيها لأن القيم اللى هتكون في الدالة هتبقى مختلفة

هنا استدعاء الدالة 3 مرات بأقسام مختلفة

هتلاحظ هنا طبع كل البيانات في مكان واحد أنا عايز يطبع كل دالة في مكانها المخصص

المشكلة دي بقالي شهور بحاول أحلها مش عارف ..!

سامح أشرف

2021-12-27T21:34:29+00:00
المزيد
- رابط مختصر

يمكننا أن نقوم بإضافة خاصية باسم 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>

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

Mohamed Refaat

2021-12-28T08:17:03+00:00
2021-12-28T08:17:28+00:00
المزيد
- رابط مختصر

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

https://academy.hsoub.com/q...

Wael Aljamal

2021-12-27T13:35:31+00:00
المزيد
- رابط مختصر

أرجو إرفاق الدالة

createLastPostsLabel

بكامل الشيفرة خاصتها

Mohamed Refaat

2021-12-27T13:58:07+00:00
المزيد
- رابط مختصر

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(selectId);
         printall.innerHTML += printArticle;
      }


    }


    // لاستدعاء أخر المقالات
    function createLastPosts(url, count, printId) {
      selectId = 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,printId) {
      selectId = printId;
      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);
    }

لاستخراج أخر المقالات

createLastPosts(
   "url", // رابط المدونة
   "count", // عدد المقالات
   "printId" // معرف الأي دي لطباعة المقالات بداخله
);

مثال

createLastPosts(
   "https://mo-222.blogspot.com", // رابط المدونة
   "3", // عدد المقالات
   "demo" // معرف الأي دي لطباعة المقالات بداخله
);

لاستخراج أخر المقالات من قسم معين

مثال

createLastPostsLabel(
	"https://mo-222.blogspot.com",
	"تكنولوجيا",
	"3",
	"demo1"
	);

مع العلم ما زالت المشكلة موجودة حتى الآن

Wael Aljamal

2021-12-27T14:04:38+00:00
المزيد
- رابط مختصر

لاحظ اين تستخدم append child يجب أن تضيف العناصر الجديدة على العنصر الذي له id بقيمة demo1 اي في السطر 529 ولا نضيفه ل head

Mohamed Refaat

2021-12-27T14:09:30+00:00
المزيد
- رابط مختصر

ده بيضيف الاسكربت ضمن الـ head لأن في كل مرة بتستدعي الدالة بيتم إنشاء سكربت مختلف على حسب البيانات المدخلة لكن المشكلة اللى بواجهها هي طباعة كل البيانات في مكان واحد أو بمعنى في اخر مكان تم تحديده لو مستخدم الدالة أكتر من مرة ولكن اللى عايزه أنه يطبع البيانات في المكان اللى بحدده فقط وبنفس العدد

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

91.3 ألف متابع

أطلق موقعك الإلكتروني في دقائق

صمم موقعك كاملا بالسحب والإفلات بدون خبرة برمجية، واحجز مكانك على الإنترنت.

أنشئ موقعك الآن

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

التعليقات

اقرأ أيضًا

تطوير الويب

أطلق موقعك الإلكتروني في دقائق