Передача переменных в jquery .css() function

Question

Я пытаюсь настроить некоторые гиперссылки для установки встроенных стилей для различных элементов на веб-странице. До сих пор мне удалось сохранить настройки элементов и атрибутов в скрытых элементах span и передать их в диалоговое окно предупреждения. Однако, когда я пытаюсь установить эти стили с помощью функции css, он не работает или не бросает никаких ошибок.

HTML:

<a class="styleswitch">Boxed 
<span class="elementselector" style="display:none">#page</span> 
<span class="styleattributes" style="display:none">"width": "1000px"</span> 
</a> 
<a class="styleswitch">Wide 
<span class="elementselector" style="display:none">#page</span> 
<span class="styleattributes" style="display:none">"width": "100%"</span> 
</a> 

JQuery:

jQuery(document).ready(function(){ 
    jQuery('a.styleswitch').click(function(){ 
    var element_selector = jQuery(this).find("span.elementselector").contents().text(), 
     style_attributes = jQuery(this).find("span.styleattributes").contents().text(); 

    // alert('Set ' + element_selector + ' to ' + style_attributes + ''); 

    jQuery(element_selector).css(style_attributes); 

    return false; 
}); 

Answer 1

Вы передаете строку методу .css(), это означает, что вы используете его как геттер, а не сеттер.

Я предложил бы использовать HTML5 data-* атрибуты, здесь data-styles является строковым представлением объекта, используя JQuery .data() метода вы будете иметь объект:

<a data-styles='{ "width": "1000px", "prop": "value" }' 
    data-selector="#page" 
    class="styleswitch"> 
     Boxed 
</a> 

JavaScript:

$('a.styleswitch').on('click', function() { 
    var data = $(this).data(); 
    $(data.selector).css(data.styles); 
}); 

http://jsfiddle.net/7t4Jb/

Answer 2

С этим:

jQuery(element_selector).css(JSON.parse("{" + style_attributes + "}")); 

Да, это работает.

Другой вариант:

var styleParts = style_attributes.split(":"); 
jQuery(element_selector).css(styleParts[0].replace(/"/g, ''), styleParts[1]); 

ЗАМЕНИТЬ просто удалить двойные кавычки из названия стиля.

Однако в будущем вы можете захотеть добавить больше правил стиля (а не только ширину), поэтому я предлагаю вам добавить скобки в правило стиля (чтобы стать его JSON), поэтому у вас будет:

<span class="styleattributes" style="display:none"> 
    {"width": "100%", "backgroundColor": "red"} 
</span> 

Если вы сделаете это изменение, вы бы прочитать стиль, как это:

jQuery(element_selector).css(eval(style_attributes)); 

(я использую вместо evalJSON.parse здесь, потому что я предполагаю, что вы будете редактировать эти CSS вручную и eval не такой строгий, как JSON.parse).

Надеюсь, это поможет. Cheers

Answer 3

Сохранение подобных вещей в скрытых <span> атрибутах проблематично, потому что браузер все еще обращает внимание на содержимое. Лучше (ну, безопаснее, некоторые люди не любят его по причинам, я не очень понимаю) способ копить вещи, как это использовать <script> тегов с «типом» не-JavaScript атрибута:

<a class="styleswitch">Boxed 
    <script type=text/my-selector class="elementselector">#page</script> 
    <script type=text/css-styles class="styleattributes">{ "width": "1000px" }</script> 
</a> 

Браузер полностью игнорирует это (за исключением любых встроенных закрывающих тегов </script>). Вы все еще можете извлечь содержимое из JQuery:

jQuery(document).ready(function(){ 
    jQuery('a.styleswitch').click(function(){ 
     var element_selector = jQuery(this).find(".elementselector").html(), 
     style_attributes = jQuery(this).find(".styleattributes").html()); 

    // alert('Set ' + element_selector + ' to ' + style_attributes + ''); 

    jQuery(element_selector).css(JSON.parse(style_attributes)); 

    return false; 
}); 

Обратите внимание, что я модифицированный блок атрибута стиля быть JSON структурой, так что он может быть разобран и превращен в объект JavaScript в вашем «нажмите кнопку» обработчик.

Редактирование Я не знаю, кто являются downvoters, но это действительно обычная практика для выполнения таких вещей, как хранение HTML-шаблонов и блоков JSON. Все браузеры, заслуживающие внимания (включая мобильные браузеры), полностью игнорируют содержимое блоков <script> с атрибутами типа «не». Это означает, что содержимое может содержать фрагменты HTML без каких-либо проблем.

Answer 4

Изменить jQuery(element_selector).css(style_attributes);

в ==>jQuery(element_selector).css({style_attributes});

и он должен работать.

Есть 2 способа реализации CSS в JQuery:

.css("width","px")

или

.css({"width":"px"})

Что вы делали неправильно пытались реализовать CSS со вторым способом, но с не {}.

Надеюсь, я помог вам.