こんにちは。
以下のjQueryコードを出来るだけ短縮・最適化したいです。
for/while文でどうにかできそうな気がしますが、思いつきませんでした。
var icoPos = ($(window).width() / 4);
var pos01 = '-'+icoPos+'px';
var pos02 = '-'+(icoPos*2)+'px';
var pos03 = '-'+(icoPos*3)+'px';
$('li.icon01').css('background-position', '0 0');
$('li.icon02').css('background-position', pos01+' 0');
$('li.icon03').css('background-position', pos02+' 0');
$('li.icon04').css('background-position', pos03+' 0');
$('li.icon05').css('background-position', '0 '+pos01);
$('li.icon06').css('background-position', pos01+' '+pos01);
$('li.icon07').css('background-position', pos02+' '+pos01);
$('li.icon08').css('background-position', pos03+' '+pos01);
$('li.icon09').css('background-position', '0 '+pos02);
$('li.icon10').css('background-position', pos01+' '+pos02);
$('li.icon11').css('background-position', pos02+' '+pos02);
$('li.icon12').css('background-position', pos03+' '+pos02);
$('li.icon13').css('background-position', '0 '+pos03);
$('li.icon14').css('background-position', pos01+' '+pos03);
$('li.icon15').css('background-position', pos02+' '+pos03);
$('li.icon16').css('background-position', pos03+' '+pos03);
No.1
- 回答日時:
なにやら複雑ですねぇ
可読性無視で単純にループ化するとこんな感じかなぁ
var icoPos = ($(window).width() / 4);
var pos01 = '-'+icoPos+'px';
var pos02 = '-'+(icoPos*2)+'px';
var pos03 = '-'+(icoPos*3)+'px';
var basePos = [ '0', pos01, pos02, pos03 ];
for ( var i = 0; i < 16; i+=4 ) {
$('li.icon0' + (i + 1)).css('background-position', '0 ' + basePos[i%4]);
$('li.icon0' + (i + 2)).css('background-position', pos01+' ' + basePos[i%4]);
$('li.icon0' + (i + 3)).css('background-position', pos02+' ' + basePos[i%4]);
$('li.icon0' + (i + 4)).css('background-position', pos03+' ' + basePos[i%4]);
}
回答ありがとうございます!
この状態だとicon01~icon09までしかbackground-positionが付与されないため、改修が必要でした。for(i++)ばかり使ってるので、for(i+=4)とかはちょっとパッと出てこなかったです…勉強になります。ありがとうございます。
ちなみに関係ないどうでもいい情報ですが、俺も12/6生まれですのでなんとなく嬉しかったです。
No.2ベストアンサー
- 回答日時:
ほとんど同じなのと、ループ内で同じ計算をしてしまっていますが・・・
var icoPos = ($(window).width() / 4);
for(var i=0; i<16; i++){
var selector = "li.icon" + (i<9?"0"+(i+1):i+1);
var position = (-icoPos * (i%4)) + "px ";
position += (icoPos * (i/4|0)) + "px";
$(selector).css("background-position", position);
}
ところで、background-positionの指定ってこれでいいんでしたっけ?
(キャメルケースだったかも…)
position += (-icoPos * (i/4|0)) + "px";
で完璧でした!ちょっと紐解かないと理解できない箇所もあるので(i%4とか…)、勉強させてもらいます。ありがとうございます。
>ところで、background-positionの指定ってこれでいいんでしたっけ?
クォーテーションを付与しない場合は、キャメルケースですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
DOM の 要素の数え方について
-
オンマウスで画像ロールオーバ...
-
戻ってきた時ツリーメニューが...
-
<ul>から</ul>の間をjavascriptで
-
jQueryで、リンクURLの一致を確...
-
JQueryで、liタグの背景に色を...
-
C# ブラウザの自動クリック
-
JQueryタブのアクティブ アン...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報