0

レスポンシブ サイトを作成していますが、画面サイズごとに異なる画像を読み込む必要があります。画像に適用されたクラスによって画像名を取得して、window.width に応じて変数「パス」に値を設定しようとしました。

なぜ機能しないのですか？

 if (window.width() <= 410) {
     var path = 'images/small/';
 } else 
 if (window.width() <= 650) {
var path = 'images/medium/';
 } else {
   var path = 'images/big/';
 }

 $('.gallery li').click(function(){
    $('.content').load(path + $(this).attr('class'));
    });
 });
4

2 に答える 2

0

jQuery.loadメソッドを使用して画像を読み込むことはできません。画像タグを付ける必要があります：

$('.gallery li').click(function(){
    var img = $("<img />");
    img.attr('src', path + $(this).attr('class'));
    $('.content').replaceWith(img);
});

さらに、画像名を取得するには、クラスではなくデータ属性を使用することをお勧めします。例えば：

<ul class="gallery"><li data-image="example.jpg"> ... </li> ... </ul>
于 2013-01-07T11:40:06.373 に答える
0

レスポンシブWebサイトを作成したい場合、親友はCSSメディアクエリです。いくつかの例を確認するには、メディアクエリにアクセスしてください。

JavaScriptとjQueryを使用する場合は、独自のプラグインを作成する代わりに、jQueryプラグインを使用することをお勧めします。これが例です。

また、CSSにはフレームワークもあります。上記のプラグインの作成者から、CSS用のプラグインがあります。

于 2013-01-07T11:40:22.083 に答える