javascript طريقة - تغيير مصدر الصورة باستخدام jQuery




يطلع الأصلية (9)

يشبه 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 لتغيير الصور؟


Answers

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


لا توجد طريقة لتغيير مصدر الصورة باستخدام 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>


للمزيد من المعلومات. أحاول تعيين سمة src باستخدام طريقة attr في jquery لصورة الإعلان باستخدام الصيغة على سبيل المثال: $("#myid").attr('src', '/images/sample.gif');

هذا الحل مفيد ويعمل ولكن إذا كان تغيير المسار تغيير مسار الصورة ولا يعمل.

لقد بحثت عن حل هذه المشكلة ولكن لم يتم العثور على شيء.

الحل هو وضع "\" في بداية المسار: $("#myid").attr('src', '\images/sample.gif');

هذه الخدعة مفيدة جدا بالنسبة لي وآمل أنها مفيدة لغيرها.


إذا لم يكن هناك فقط إطار عمل 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>

واجهت نفس المشكلة عند محاولة استدعاء زر إعادة الكتابة. بعد إجراء بعض البحث ، تعمل الآن الوظيفة التالية بشكل جيد في جميع المتصفحات الشهيرة تقريبًا (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 على إعادة إرسال الصورة.


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

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

واحد من الأخطاء الشائعة التي يقوم بها الأشخاص عند تغيير مصدر الصورة لا ينتظر تحميل الصورة للقيام بالإجراءات التالية مثل نضوج حجم الصورة وما إلى ذلك. سوف تحتاج إلى استخدام .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);
    }
});

إذا كنت ترغب فقط في عكس الحالة الحالية (مثل سلوك زر التبديل):

$("input").prop('disabled', ! $("input").prop('disabled') );






javascript jquery image