نمایش عکس به همراه متن به صورت تصادفی بعد از رفرش شدن صفحه

ببینید بهترین روش اینه که یه آبجکت بسازید و داخلش آدرس تصویر و متن رو داخل یک آبجکت جدا قرار بدید و بعد راحت استفاده کنید
مثلا یه همچین چیزی

var img = {
    img1:{
        path: '/upload/img01',
        text: 'text01'
    },
    img2: {
        path: '/upload/img02',
        text: 'text02'
    }
}

@hossein.r.1442
ممنون از شما میشه بفرمایید چجوری باید این تکست رو نمایش بدم ؟ یا بهتر بگم از این آرایه استفاده کنم ؟
مثال عملی که وجود داره اینجاست

کنار صفحه یه آیکون i وجود داره که تکست مرتبط با عکس پس زمینه هست
ممنون میشم اگر کد من رو ادیت کنید که بتونم از همون استفاده کنم

کاری نداره دیگه اینطوری راحت میتونید استفاده کنید

var img = {
    img1:{
        path: '/upload/img01',
        text: 'text01'
    },
    img2: {
        path: '/upload/img02',
        text: 'text02'
    }
}

var randomProperty = function (obj) {
    var keys = Object.keys(obj);
    return obj[keys[ keys.length * Math.random() << 0]];
};

var path = randomProperty(img).path;
var text = randomProperty(img).text;

@hossein.r.1442
من کدم رو طبق فرمایش شما به شکل زیر تغییر دادم :

    (function($) {
        $(document).ready(function() {
            var images = {
    img1:{
        path: 'bgl01.jpg',
        caption: 'text01'
    },
    img2: {
        path: 'bgl02.jpg',
        caption: 'text02'
    }
};
            $('body').css({
                'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + images[Math.floor(Math.random() * images.length)] + ')'
            });
             $('<p>' + images.caption + '</p>').appendTo('#backtoblog');
        });
        })(jQuery);

اما انتهای url عکس undifind میفته به جای bgl01.jpg و برای نمایش کپشن هم پیغام undifind داده میشه

برات نوشتم که چطوری به مقدار داخل آبجکت دسترسی داشته باش از اون تابعی که نوشتم باید استفاده کنی

$(document).ready(function() {
  var images = {
    img1:{
      path: 'bgl01.jpg',
      caption: 'text01'
    },
    img2: {
      path: 'bgl02.jpg',
      caption: 'text02'
    }
};

  var randomProperty = function (obj) {
    var keys = Object.keys(obj);
    return obj[keys[ keys.length * Math.random() << 0]];
};

var path = randomProperty(images).path;
var text = randomProperty(images).caption;

  $('body').css({
    'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + path + ')'
  });
  $('<p>' + text + '</p>').appendTo('#backtoblog');
        });

اینم دقیقا مثال خودشما همینو استفاده کن کارت راه میوفته

@hossein.r.1442
ممنون از لطف شما
مشکل نمایش برطرف شد الان هم عکس نمایش داده میشه هم متن ولی متن و عکس مرتبط با هم نیستن یعنی وقتی عکس bgl01.jpg نشون داده میشه متن هم باید text01 ولی متن text02 نشون داده میشه

ببخشید حواسم نبود اومدم دوبار از تابع استفاده کردم به همون خاطر جابجا استفاده میکنه به این صورت تغییر بدید

$(document).ready(function() {
  var images = {
    img1:{
      path: 'bgl01.jpg',
      caption: 'text01'
    },
    img2: {
      path: 'bgl02.jpg',
      caption: 'text02'
    }
};

  var randomProperty = function (obj) {
    var keys = Object.keys(obj);
    return obj[keys[ keys.length * Math.random() << 0]];
};

var img = randomProperty(images);

  $('body').css({
    'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + img.path + ')'
  });
  $('<p>' + img.caption + '</p>').appendTo('#backtoblog');
        });

@hossein.r.1442
خیلی خیلی ممنونم از شما لطف کردید مشکل برطف شد.

برای اینکه آبجکتتون یکم ساده تر بشه میتونید از یه آرایه استفاده کنید که داخلش چند ابجکت داره و نیازی نیست برای هرکدوم از ابجکت ها یک کلید قرار بدید به صورت زیر

var images = [
    {
      path: 'bgl01.jpg',
      caption: 'text01'
    },
    {
      path: 'bgl02.jpg',
      caption: 'text02'
    }
];