2

基本的に、私が取り組んでいるポートフォリオ サイトがあり、15 個以上の作品があります。すべての CSS マークアップを手動で行うことなく、サムネイル div の背景を設定するために、現在部分を表示するために既に使用している「名前」セレクター (つまり、分をスライドさせる) を使用できるようにしたいと考えています。説明がわかりにくいかもしれませんが、私が作成した (動作していない) このコードが役立つかもしれません。

実際のサムネイル HTML は次のとおりです。

<a name="allies" class="portbox port-link allieslink">
    <div class="port-info">
        <h3>Creative Allies</h3>
        <p class="port-label">Product</p>
        <p class="port-detail">Print Design</p>
        <p class="port-label">Year</p>
        <p class="port-detail">2010</p>
     </div>
</a>

現時点では、その「allieslink」クラスの CSS には次のように記述されています。

.allieslink {
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat;
}

だから私がやりたいのは、手動のCSSを取り出して、「名前」設定に基づいてjQueryに計算させ、同じ名前セレクター（「-link.jpg」を追加）をCSSとしてプラグインすることです。

これが私の現在のjQueryコードです（ドキュメント準備機能内）：

var artname= $(".port-link").name;
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

明らかに、これは機能していません。私は正しい道を進んでいると感じているので、その理由は正確にはわかりません。正しく機能させるために正確なjQueryを見つけようとしているだけです。ヘルプ？

(現時点では、すべての要素の CSS にクラスがありますが、ポートフォリオが大きくなるにつれて、これがかなり長くなることは想像に難くありません。)

4

4 に答える 4

1

これを試して：

$(".port-link").each(function() {
    $(this).css('background', 'url(IMG/portfolio/' + $(this).attr("name"); + '-link.jpg) center top no-repeat');
});

これは、一致したすべての要素を反復処理し、適切な名前を使用して、それらのそれぞれに応じて背景を適用します

于 2012-06-25T13:59:46.097 に答える