0

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

mohamed_refat
المزيد

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

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

يمكن حل هذه المشكلة بأكثر من طريقة، وأسهل طريقة هي عمل متغير عام (خارج كل الدوال) :

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');
0
mohamed_refat

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

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

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

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

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

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

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

0
waelaljamal

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

createLastPostsLabel

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

0
mohamed_refat 
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"
	);

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

0
waelaljamal

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

0
mohamed_refat

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