Самый эффективный способ изменить путь с помощью JS / jQuery - PullRequest
1 голос
/ 10 января 2012

У меня есть множество социальных кнопок (<img> s в <ul>) на правой стороне моего сайта.

Они могут иметь имена файлов, такие как google.png или twitter.png.

Теперь я хочу изменить src при наведении на google_b.png или twitter_b.png - и я буду последовательно называть свои файлы таким образом для всех них.

Мой вопрос заключается в том, как я могу легко изменить имена файлов на _b (с сохранением расширения файла) без необходимости предварительно определять имена файлов?

На данный момент мой код выглядит так:

$('#social li').hover(function() {
    // hover in
    // a bunch of code to animate a tooltip is here

    var $img = $t.children('img'),
        src = $img.attr('src');
    // change the source to img_b.png
    $img.attr('src', src);
}, 
function() {
    // hover out

    var $img = $(this).children('img'),
        src = $img.attr('src');
    // remove _b to make it img.png again
    $img.attr('src', src);
});

Ответы [ 4 ]

3 голосов
/ 10 января 2012

Предполагая, что файлы не будут иметь поддельных расширений (image.png.jpeg), просто разделите src на ., добавьте _b ко второй части к последней части и снова присоединитесь к ..

src = $img.attr('src');
var temp = src.split(".");
temp[temp.length - 2] += "_b"; //change second to last element of array
src = temp.join(".");
1 голос
/ 10 января 2012
$('#social li').hover(function() {
    // hover in
    // a bunch of code to animate a tooltip is here

    var $img = $t.children('img'),
        src = $img.attr('src').replace(".png", "_b.png");
    // change the source to img_b.png
    $img.attr('src', src);
}, 
function() {
    // hover out

    var $img = $(this).children('img'),
        src = $img.attr('src').replace("_b.png", ".png");
    // remove _b to make it img.png again
    $img.attr('src', src);
});
0 голосов
/ 10 января 2012

Вы можете использовать функцию данных в jQuery для хранения информации, чтобы вам не приходилось постоянно ее пересчитывать.

$('#social li img').each(function(){
    var image = this.src.split(".");
    var onImage = image[0] + "_b." + image[1];

    $(this).data("onImage",onImage);
    $(this).data("offImage",this.src);

}).hover(function(){
    this.src = $(this).data("onImage");
},function(){
    this.src = $(this).data("offImage");
});
0 голосов
/ 10 января 2012

Вы можете извлечь атрибут src непосредственно из каждого изображения, используя функцию jquery attr (), добавлять к нему символы, такие как _b, и указывать их при наведении курсора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...