Поменяйте местами все изображения на странице через несколько ссылок JQuery - PullRequest
Новая
       26

Поменяйте местами все изображения на странице через несколько ссылок JQuery

0 голосов
/ 18 марта 2011

Хорошо, у меня есть это до сих пор, и это работает до некоторой степени, 

$('a').click(function(e) 
{  
   e.preventDefault();  
   var preFix = $(this).attr("href");
   $('img.swap').each(
       function() { this.src = this.src.replace('.gif', (preFix)+'.gif');
   }); 
});

Это перетаскивает ссылку 'HREF' и добавляет ее в конец изображения. Проблема в том, что, когда я нажимаю на первую ссылку, изображения меняются очень хорошо, но во второй раз, когда я нажимаю одну из 5 ссылок, изображение разрывается.

Я думаю, это потому, что он просто добавляет 2-й префикс в конце первого. Я перепробовал несколько вещей, но в итоге это все сломалось.

Мне нужно сделать две вещи:

1) Когда вы нажимаете одну ссылку, затем другую, я хочу удалить старый префикс и новый.

2) Если дважды щелкнуть по одной и той же ссылке, мне нужно сначала добавить префикс, а затем просто удалить префикс.

Большое спасибо

Ответы [ 2 ]

3 голосов
/ 18 марта 2011

Попробуйте это:: -D 

$('img.swap').each(function{
    $(this).data('current_image', this.src);
    //saves the default image in data
})
$('a').click(function(e){  
       e.preventDefault();  
       var preFix = $(this).attr("href");
       $('img.swap').each(
       function() { 
         if($(this).data('prefix') != prefix){
           this.src = $(this).data('current_image').replace('.gif', (preFix)+'.gif');
           $(this).data('prefix', prefix)
         }
         else {
           this.src = $(this).data('current_image');
           $(this).data('prefix', '')
         }
       }); 
});

$(this).data(..) сохраняет переменную в этом конкретном элементе DOM, после чего вы можете выполнять логические операции, чтобы проверять ее на соответствие имеющемуся значению: -)

Это более объяснено здесь: jQuery.data ()

UPDATE

и вместо использования тега (привязки) используйте что-то еще с className, например .changeIMG: 

<span class='changeIMG' postfix='-bw'>Change to black and white</span>

и css может выглядеть как тег привязки: 

span.changeIMG {
   cursor: pointer;
   color: blue;
   text-decoration: underline;
}

и затем есть 2 изменения в коде выше:

$('a').click(function(e){ становится $('span.changeIMG').click(function(e){
и var preFix = $(this).attr("href"); становятся var preFix = $(this).attr("postfix");

0 голосов
/ 18 марта 2011 
$("img.swap").each(function(){
     var origSrc = $(this).attr("src");
     //original src can now always be accessed
     $(this).attr("origSrc",origSrc);
});

$("a").click(function(e){
    e.preventDefault();
    var prefix = $(this).attr("href");
    $("img.swap").each(function(){
        var origSrc = $(this).attr("origSrc");
        var newSrc = origSrc.replace(".gif",prefix+".gif");
        $(this).attr("src",newSrc);
    });
});
...