0

我有这个有效的代码：

$(document).ready(function () {

  var style = $('#formulario').val();

  $('#formulario').change(function() {
    var nombreArchivo = $(this).val();
    nombreArchivo = nombreArchivo.replace(/ /gi, '_');
    var ruta = '/printbox/views/formulariosweb/';
    $('#contenedorFormulario').load( ruta + nombreArchivo + '.html');
    $('head').append( $('<link rel="stylesheet" type="text/css"/>').attr('href', ruta + nombreArchivo + '.css') );
  });

  $("#formulario").trigger('change');

});

它根据表单中的选择更改 div 的内容，并且在每次更改时都正确应用样式。

但是，它添加 css 的次数与我更改表单中的值一样多。

当我尝试将title属性设置为 时，问题就出现了LINK，那么只有第一个样式有效，当我更改它时，新样式被加载到head但没有被应用。

我去了 W3 网站（http://www.w3schools.com/tags/tag_link.asp），它说 LINK 支持该属性title，所以我不知道这里有什么问题。我这样添加：

$('head').append( $('<link rel="stylesheet" type="text/css"/>').attr({ 'href': ruta + nombreArchivo + '.css', 'title': nombreArchivo }) );

任何帮助都感激不尽。

谢谢

PS：我添加了 title 属性以便以后能够识别和删除它，一旦我更改了下拉列表中的值，因此它不会填充标题。

4

2 回答 2

1

您可以使用以下命令检查样式表是否尚未加载：

if (!$("link[href='/path/to.css']").length)

因此，如果最终目标是您只想加载每个样式表一次，那么您的代码将是：

$(document).ready(function () {

  var style = $('#formulario').val();

  $('#formulario').change(function() {
    var nombreArchivo = $(this).val();
    nombreArchivo = nombreArchivo.replace(/ /gi, '_');
    var ruta = '/printbox/views/formulariosweb/';
    $('#contenedorFormulario').load( ruta + nombreArchivo + '.html');
    if (!$("link[href='" + ruta + nombreArchivo + "'.css']").length) {
      $('head').append( $('<link rel="stylesheet" type="text/css"/>').attr('href', ruta + nombreArchivo + '.css') );
    }
 });

 $("#formulario").trigger('change');

});
于 2013-03-12T20:16:55.340 回答
1

我去向 Mozilla bugtrack 报告了这个问题，发现了一个类似的问题 ( https://bugzilla.mozilla.org/show_bug.cgi?id=223410 ) 讨论了这个问题，并把我带到了这个页面：

http://www.w3.org/TR/html401/present/styles.html#h-14.3.1

其中规范说指定title属性使其成为首选样式，然后不应用其他样式。

Authors may specify a number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite among these depending on their preferences.
For instance, an author may specify one style sheet designed for small screens and another for users with weak vision (e.g., large fonts).
User agents should allow users to select from alternate style sheets.

The author may specify that one of the alternates is a preferred style sheet. User agents should apply the author's preferred style sheet unless the user has selected a different alternate.
于 2013-03-12T20:32:06.917 回答