Jquery .prop ('currentSrc') لا يعثر على خاصية srcset في عنصر <picture>

-1

أحاول استخدامه .prop('currentSrc') للحصول على srcset الحالي (يعتمد على حجم المتصفح) للصورة التي يتم عرضها.

ومع ذلك ، لا يبدو Jquery قادرًا على الحصول على قيمة srcset من html <picture> العنصر في الرمز أدناه. تستمر قيمة newBackground في العودة غير محددة.

هل يمكن لـ jquery استخدام .prop ('currentSrc') للحصول على srcset المستخدم حاليًا من عنصر الصورة؟ إذا لم يكن كذلك ، فهل هناك طريقة أفضل؟ 

var photos = $("picture").toArray();
window.setInterval(changePhoto, 6000);

function changePhoto() {
  photos.push(photos.shift());
  var newBackground = photos[0];
  console.log(newBackground); // logs <picture> element
  newBackground = $(newBackground).prop('currentSrc');
  console.log(newBackground); // logs undefined
  $(".banner").css("background-image", "url(" + newBackground + ")");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture>
  <source media="(min-width: 901px)" srcset="oldmanfull.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="oldmantablet.jpg">
  <img src="oldmantablet.jpg" />
</picture>
<picture>
  <source media="(min-width: 901px)" srcset="hatman.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="hatmantablet.jpg">
  <img src="hatmantablet.jpg" />
</picture>

1 إجابة

1
افضل جواب

أولا ، تحتاج إلى إضافة <img> عنصر لجهودكم <picture> . هذه هي الصورة الفعلية التي سيتم عرضها ، وتحدد سمة src صورة احتياطية ، في حالة عدم وجود أي من <source> تعمل العلامات لجهاز معين. 

<picture>
  <source media="(min-width: 901px)" srcset="oldmanfull.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="oldmantablet.jpg">
  <img src="fallback_image.png"></img>
</picture>

الثانية ، currentSrc العنصر قيد التشغيل <img> ، ليس <picture> ، منذ <picture> يعمل العنصر عن طريق تعيين src من طفلها <img> . لذا يجب أن يحفر اختيارك jQuery <img> العلامة نفسها: 

$('picture>img')

مع هذه التصحيحات ، يجب أن يعمل هذا الرمز: 

var photos = $("picture>img").toArray();
window.setInterval(changePhoto, 6000);

function changePhoto() {
  photos.push(photos.shift());
  var newBackground = photos[0];
  console.log(newBackground); // logs <img> element
  newBackground = $(newBackground).prop('currentSrc');
  console.log(newBackground); // logs undefined
  $(".banner").css("background-image", "url(" + newBackground + ")");
}

وقد يكون من الجدير بالذكر ذلك currentSrc هي خاصية جافا سكريبت عادية ، لذا يمكنك الوصول إليها بسهولة بدون jQuery: 

newBackground = newBackground.currentSrc;
:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
فوق
قائمة طعام