Превключвайте изображения при щракване с помощта на jQuery

Имам две изображения, които трябва да превключвам, като щракна върху изображението.

    <img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' 
data-src='images/prof_arrow1.png' />

Когато потребителят щракне върху изображението, src трябва да получи стойността на data-swap и когато щракнете отново, src трябва да се промени на data-src. Това трябва да продължи да се случва точно като превключване. Всяка помощ се оценява.

$("#arrowRotate").click(function() {
    var swapImage = $("#arrowGrey").attr("data-swap");
    $("#arrowGrey").attr({
        'src': swapImage,
        id: 'arrowOrange'
    });
});

Ето докъде съм стигнал досега.


javascript toggle jquery src attr
person Thomas Sebastian    schedule 03.12.2014    source източник
comment
бихте ли могли да направите jsFiddle.net?   -  person Amy    schedule 03.12.2014

Отговори (4)


arrow_upward
7
arrow_downward

Въз основа на моето разбиране от вашия въпрос, надявам се това да е този, който очаквате,

$("#arrowRotate").click(function() { 
      var _this = $(this);
      var current = _this.attr("src");
      var swap = _this.attr("data-swap");     
     _this.attr('src', swap).attr("data-swap",current);   
});

ДЕМО Fiddle

person Krish R    schedule 03.12.2014
comment
Да, това исках. Това ми изглежда много просто. Може да приложа това. Все пак бих искал да го обясниш малко, за да ме разбереш. Но няма проблем, ще питам гугъл. Оценявам и другите, които отговориха на въпроса ми. - person Thomas Sebastian; 03.12.2014
comment
Добре, готино, ако имате нужда, мога да ви обясня повече за. - person Krish R; 03.12.2014
comment
Не разбирам последния ред от логиката на вашия код. Може би, ако можете да ми обясните това. - person Thomas Sebastian; 03.12.2014
comment
О, разбрах. Добавяте атрибут data-swap към src, като в същото време добавяте src към data-swap. Толкова хубаво. - person Thomas Sebastian; 03.12.2014
comment
Да, прав сте, държа стойностите в променливи и ги замествам съответно! - person Krish R; 03.12.2014

arrow_upward
3
arrow_downward

Опитайте тази:

$("#arrowRotate").click(function(){
if($(this).attr('src')==$(this).attr('data-src'))
  {
    var a = $(this).attr('data-swap');
    $(this).attr('src',a);
  }     
else
  {
    var b = $(this).attr('data-src');
    $(this).attr('src',b);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='arrowRotate' src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg' data-swap='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg' data-src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg'>

person Amy    schedule 03.12.2014

arrow_upward
1
arrow_downward

Това може да помогне. Мисля, че това е най-лесният начин за смяна между изображения:

<img id="arrowRotate" src="images/img1.png" data-swap="images/img2.png" data-src="images/img1.png" onclick="swapImage()" />

function swapImage(){
    var swapImage = $('#arrowRotate').attr('data-swap'),
        currentImage = $('#arrowRotate').attr('src');

    $('#arrowRotate').attr({
        'src': swapImage,
        'data-swap': currentImage
    });
};
person David    schedule 03.12.2014

arrow_upward
0
arrow_downward

Ако те разбирам правилно, можеш да го направиш така:

HTML

<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' data-src='images/prof_arrow1.png' data-swapped="false"/>

Javascript

$("#arrowRotate").click(function() {

    var swapped = $(this).attr("data-swapped");
    var init = 'false';

    if(swapped === 'false'){
        var swapImage = $(this).attr("data-swap");
        init = true;
    }else{
        var swapImage = $(this).attr("data-src");
    }

    $(this).attr({
        'src': swapImage,
        'id': 'arrowOrange',
        'data-swapped': init
    });

});
person empiric    schedule 03.12.2014