javascript - 将变量传递给 jquery .css() 函数

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() 方法，这意味着您将它用作 getter 而不是 setter。

我建议使用 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/