javascript - يكشف - موقع يطلع اصل الصوره




تغيير مصدر الصورة باستخدام jQuery (7)

إذا كنت تريد شيئًا ما باستخدام jQuery ، فربما تريد البحث في jQuery Cycle Plugin ، scroRight التجريبي (مثال أسفل اليمين)

يشبه DOM الخاص بي هذا:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

عندما ينقر شخص ما على صورة ، أريد أن تتغير الصورة src إلى <img src="imgx_off.gif"> حيث يمثل x رقم الصورة 1 أو 2.

هل هذا ممكن أم يجب علي استخدام CSS لتغيير الصور؟


إذا لم يكن هناك فقط إطار عمل jQuery أو موارد أخرى للقتل - العديد من كيلو بايت للتنزيل في كل مرة من قبل كل مستخدم لمجرد خدعة بسيطة - ولكن أيضا جافا سكريبت الأصلي (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

يمكن كتابة هذا العام والأنيق:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

لا توجد طريقة لتغيير مصدر الصورة باستخدام CSS.

الطريقة الوحيدة الممكنة هي استخدام Javascript أو أي مكتبة Javascript مثل jQuery .

منطق-

تكون الصور داخل div ولا توجد class أو id بهذه الصورة.

لذلك سيتم اختيار المنطق داخل div حيث توجد الصور.

ثم حدد جميع عناصر الصور مع حلقة وتغيير الصورة src مع Javascript / jQuery .

رمز المثال مع الإخراج التجريبي-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>


لدي نفس العجب اليوم ، لقد فعلت على هذا النحو:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

واجهت نفس المشكلة عند محاولة استدعاء زر إعادة الكتابة. بعد إجراء بعض البحث ، تعمل الآن الوظيفة التالية بشكل جيد في جميع المتصفحات الشهيرة تقريبًا (chrome و Firefox و IE و Edge و ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

يتم استخدام "theUrl" لتقديم صورة captcha جديدة ويمكن تجاهلها في حالتك. تتمثل أهم نقطة في إنشاء عنوان URL جديد يجبر FF و IE على إعادة إرسال الصورة.


واحد من الأخطاء الشائعة التي يقوم بها الأشخاص عند تغيير مصدر الصورة لا ينتظر تحميل الصورة للقيام بالإجراءات التالية مثل نضوج حجم الصورة وما إلى ذلك. سوف تحتاج إلى استخدام .load() للقيام بالأشياء بعد تحميل الصورة.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

سبب التعديل: https://.com/a/670433/561545


يمكنك استخدام وظيفة attr() في jQuery. على سبيل المثال ، إذا كان لديك img علامة لديه سمة معرف 'my_image':

<img id="my_image" src="first.jpg"/>

ثم يمكنك تغيير src في jQuery بواسطة:

$("#my_image").attr("src","second.jpg");

لإرفاق هذا بالحدث ، يمكنك كتابة:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

لتدوير الصورة ، يمكنك القيام بذلك:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});




image