1

同じ行にロゴ (静的) とページ ヘッダー (これは変更されます) のリストがあります。ページヘッダーが占めていない残りのスペースに、ロゴ (スペースに表示するには多すぎる) を動的に合わせたいと考えています。

アプローチ：

  • 最初にロゴを非表示

1.) leftoverSpace = containerWdith - pageheaderWidth
2.) 各ロゴの幅をループします
。 3.) 「leftoverSpace」の数値に達すると、ループが停止します。

これは私がこれまでに得たものです。正しくありませんが、試しています。

var pageheaderWidth = null;
brandsbannerWidth = null;
pageheaderWidth = $(".page_header h1").width()
pageheaderWidth = pageheaderWidth + 40;    

brandsWidth = (960-pageheaderWidth)-10

$(".brands_banner li").each (function(index) {

brandsbannerWidth = $(this).width();

if(brandsbannerWidth == brandsWidth) 

$(this).show();

});

助けていただければ幸いです。前もって感謝します。

4

2 に答える 2

0

コードを見なければ、良い答えを出すのは本当に難しいです。

次のようなものが必要だと思います：

var logos = $('.logos');

logos.hide();

$.each(logos, function () {

    var containerWidth = ...//define your variable here
    var pageheaderWidth = ...//define your variable here

    leftoverSpace = containerWidth - pageheaderWidth

    if (leftoverSpace == yourThresholdHere) {
         return false;
    }

    $(this).show();
});

編集

今あなたの編集を見る：

var pageheaderWidth = $(".page_header h1").width() + 40 //no need to declare it previously 
var brandsWidth = (960-pageheaderWidth)-10

$(".brands_banner li").each (function(index) {
      (condition here)
});
于 2012-04-11T22:17:04.110 に答える