jquery удалить attr затем добавить attr

Question

Я работаю для некоторого кода с bxslider , потому что у меня много больших изображений, страница загружается медленно, я пробовал любой lazy loading plugin, но не очень хорошо работает с bxslider. Наконец, я попытался написать какой-то код самостоятельно.

Я пытался что-то сделать, если div is visible, removeAttr data-style, то добавить addAttr style. мой код в jsfiddle (пропущенный код для bxslider):

<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fPalmFrond_ROW2095872384.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fJacksonSquare_ROW1364682631.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fAustraliaClouds_ROW1600390948.jpg') no-repeat;background-position:0px 0px;"></div>​    

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== 'undefined' && data_style!== false){
            var attr_image = $(this).attr("data-style");
            $(this).css('background',attr_image).removeAttr("data-style");
        }
    }
});​

но я не уверен, почему это не работает. Я рад, если кто-нибудь может мне помочь. большое спасибо.

Answer 1

Происходит две вещи:

1) Вы должны проверить, что он не определен, с помощью функции typeof в javascript, например так:

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(typeof data_style!== 'undefined' && data_style!== false){                   
            var attr_image = $(this).attr("data-style");
            alert(attr_image);
            $(this).css('background', attr_image).removeAttr("data-style");
        }
    }
});

(для хорошегообъяснение причины см. в этом ответе о typeof

2) Вы пытаетесь слишком сильно перейти в "фоновый" стиль с помощью вызова $(this).css('background', attr_image).Итак, вам нужно изменить свой атрибут стиля данных следующим образом:

<div class="bgAnchor" data-style="url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat"></div>

Если вы хотите установить background-position и т. Д., Вы можете сделать это в css для ВСЕХ элементов .bgAnchor, ИЛИМожно добавить новый стиль данных для background-position, но вы не можете втиснуть background-position и background в свойство background css.

Answer 2

Проблема здесь:

$(this).css('background',attr_image)

Ваш var attr_image (кстати, вам не нужен, он идентичен data_style) - следующая строка (для 1-го деления):

background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;

Самое простое решение - использовать это:

this.style = attr_image;

Другое решение состоит в том, чтобы поместить свойства вашего стиля в отдельные атрибуты data-, один для background, другой для background-repeat и еще один для background-position. В этом случае ваши data- атрибуты должны содержать только значения, а не имена свойств CSS.

Answer 3

.css() работает только для одного свойства за раз, у вас есть 3, попробуйте использовать атрибут style;Undefined - это не строка, это встроенная переменная;и вам не нужно получать data_style дважды.

Попробуйте:

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== undefined && data_style!== false){
            $(this).attr('style',data_style).removeAttr("data-style");
        }
    }
});​

Answer 4

со страницы jQuery css ()

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') 
and $(elem).css('marginRight'), and so on.

это означает, что вы не можете использовать фон в css ()

так что вы должны сделать это с атрибутом стиля.

 $(this).attr('style',attr_image);

вот страница jsFiddle