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 Web（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：ドロップダウンリストの値を変更すると、後で識別して削除できるようにタイトル属性を追加します。これにより、ヘッダーにデータが入力されなくなります。

4

2 に答える 2

1

以下を使用して、スタイルシートがまだロードされていないことを確認できます。

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

したがって、最終的に各スタイルシートを1回だけロードすることが目標である場合、コードは次のようになります。

$(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バグトラックに報告しに行き、これが議論されている同様の問題（ 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 に答える