0

このような同じクラスを持つ4つのリンクがあります

<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>

このリンクのそれぞれをクリックすると、ライトボックスが読み込まれます。4 つのリンクはすべて、ライトボックス内のコンテンツの見出しを除いて、同じライトボックスを読み込みます。4 つのライトボックスの見出しはすべて異なりますが、内容は同じです。また、異なる画像を持つ 3 番目のリンクを除いて、すべてのライトボックスには同じ製品画像があります。jQueryでこれを達成する必要があります。

4

1 に答える 1

2

html:

    <a href="" class="learn-more" rel="0">Learn More</a>
    <a href="" class="learn-more" rel="1" >Learn More</a>
    <a href="" class="learn-more" rel="2" >Learn More</a>
    <a href="" class="learn-more" rel="3" >Learn More</a>
    <div class="LightBox">
    <div class="LightBox_h"><img src="image/img0.jpg">your text</div>
    <div calss="LightBox_b">your text</div>
    <div calss="LightBox_f">your text</div>
    </div><!--End LightBox-->

スタイル：

LightBox{display:none}

クエリ:

$('a').click(function(){
  $('.LightBox').css({'display':'block'}); 
  var i_see =  parseInt($(this).attr('rel'));        //  you can use  case 
  if ( i_see == 0){$('.LightBox_h').html('new next')}
     else if (i_see ==1){$('.LightBox_h').html('new next')}
        else if (i_see ==2){$('.LightBox_h').html('new next')}
            else if (i_see ==3){$('.LightBox_h').html('new next')}
});

このようないくつか

また

var arr = ["img0" , "img1","img2" , "img3" ]; //sourse to img

   $('a').click(function(){
      $('.LightBox').css({'display':'block'}); 
      var i_see =  parseInt($(this).attr('rel'));       
      $('.LightBox_h img ').attr('src':'+ arr[i_see] +'); 

    });
于 2012-11-22T06:51:16.250 に答える