-3

Jquery コードの問題に直面しています。この問題を解決するのを手伝ってください。

画像を表示するための HTML コード:

<body>
    <div class="info_image">image1</div>
    <div class="info_image">image2</div>
    <div class="info_image">image3</div>

画像は id とリンクしています:

    <div class="reference">
            <p><img id="image1" src="brush-seller.jpg"/></p>
            <p><img id="image2" src="Pest-seller.jpg"/></p>
            <p><img id="image3" src="pick-seller.jpg"/></p>
</body>

問題は JavaScript にあります。.attr('src',value)タグを使用して、画像 ID をソースとして使用し、その画像を最初の 3 div に表示する必要があります。これまでのところ、機能しないコードを見つけました：

.attr('src','image/'+info_elem.find('.info_image').html())

このjqueryコードを修正するのを手伝ってください。

4

1 に答える 1

1

.each()Div を反復処理するために使用します。html を取得する

.css()対応する背景画像を設定するために使用します

$('.info_image').each(function() {
    var $this = $(this);  
    var imgId = $this.html(); // Assuming the div html contains just the image ID
    var imgSrc = $('#' + imgId).attr('src');

    $this.css('backgroundImage','url('+ imgSrc + ')');
})

空のスペースやその他の文字のケースを処理する必要がある場合があるため、html の代わりに HTML5 データ属性を使用して画像 ID を保存することをお勧めします...

<div class="info_image" data-image="image1">Here comes image1</div>
<div class="info_image" data-image="image2">Here comes image2</div>
<div class="info_image" data-image="image3">Here comes image3</div>

Javascript

  $('.info_image').each(function() {
            var $this = $(this);  
            var imgId = $this.data('image'); 
            var imgSrc = $('#' + imgId).attr('src');

            $this.css('backgroundImage','url('+ imgSrc + ')');
        })

これでだいぶすっきりします

于 2012-11-12T18:26:27.197 に答える