0

私は、CSSをオーバーライドしてHTMLテンプレートを部分的に編集することしかできないサードパーティのプラットフォームを使用しているクライアントのために働いています。Javascriptを追加して変更を加えることもできます。この場合、リストアイテム内の画像として表されるサムネイル画像のサイズに基づいてクラスとIDを追加する必要があります。画像をdivに置き換えて、フィドルを開始しました。

http://jsfiddle.net/dbudell/SYTsP/4/

HTMLは次のとおりです。

<ul>
  <li><div class="item item1"></div></li>
  <li><div class="item item2"></div></li>
</ul>

そしてCSS。ご覧のとおり、.item1を「縦」の寸法に設定し、.item2を「横の寸法」に設定しました。これらの寸法に基づいてIDに追加したいと思います。

li {
   display:inline-block;
   margin:5px;
}

.item1, .item2 {
  border:1px solid #333;
}

.item1 {
   width:100px;
   height:200px;
}

.item2 {
    width:200px;
    height:100px;
}

#fill-portrait {
  background:#333;
}

#fill-landscape {
  background:#888;
}

これがJQueryコードです。構文的には正しいように見えますが、結果は得られません。問題が何であるかわからない。

var itemWidth = $('.item').width();
var itemHeight = $('.item').height();

if (itemWidth > itemheight) {
  $('.item', this).addAttr('id','fill-landscape');
} else {
  $('.item', this).addAttr('id','fill-portrait');
}

繰り返しますが、フィドルへのリンクはhttp://jsfiddle.net/dbudell/SYTsP/4/です。

4

2 に答える 2

2

正しくないように見えるものがいくつかあります。

  • 現在のコードのタイプミスitemheightはitemHeight
  • addAttr("id, "value")する必要がありますattr("id", "value")
  • thisあなたのセレクター$("li", this)では、windowこのようなセレクターでは使用できない を$("li", this).length= 0として参照しています
  • li最初に遭遇したものにのみアクセスしており、すべてのli要素にアクセスしているわけではありませんul

デモ- 上記のすべてを組み合わせる

上記のデモと次のスクリプトで、既存の HTML と CSS を使用しました。

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.attr('id', 'fill-landscape');
  } else {
    $item.attr('id', 'fill-portrait');
  }
});

id と class に関する補足事項
これらの要素のいくつかで同じ値を使用することを計画している場合は、代わりidにそれらをクラスに切り替えたいと思うかもしれません。値は一意である必要があります。これは無効な HTML であり、jQuery セレクターも最初の一致のみに一致し、コレクションを返しません。もちろん、これは CSS も から に更新する必要があることを意味します。.addClass("fill-landscape")attr("id", "fill-landscape")idid#fill-landscape.fill-landscape

デモ- 念のため ID の代わりにクラスを使用する

上記のデモでは、次のように変更された CSS を使用しました (#fill-x は .fill-x になりました)。

.fill-portrait {
  background:#333;
}
.fill-landscape {
  background:#888;
}

変更されたスクリプト (.addClass()の代わりに使用.attr()):

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.addClass('fill-landscape');
  } else {
    $item.addClass('fill-portrait');
  }
});
于 2013-01-11T23:17:44.683 に答える
0

寸法を取得しようとしている個々の要素を選択する必要があります。それ以外の場合、 $('li') セレクターはページ上のすべての「li」要素を選択しています。例えば：

$('.item1').height();

次に、次のように id を追加できます。

$('.item1').attr('id', 'blah');

明示的な例http://jsfiddle.net/SYTsP/7/ :

var $item1 = $('.item1');
var $item2 = $('.item2');

setId($item1);
setId($item2);

function setId($item){
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.parent('li').attr('id','fill-landscape');
  } else {
    $item.parent('li').attr('id','fill-portrait');
  }
}

今、より多くの反復で!!

http://jsfiddle.net/SYTsP/9/

于 2013-01-11T23:03:43.030 に答える