Question

我有四个链接都是同一个类，如此

<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>

点击此链接后，灯箱将加载。除灯箱内容的标题外，所有四个链接都将加载相同的灯箱。所有四个灯箱都有不同的标题，但内容相同。此外，除了第三个链接之外，所有灯箱都将具有相同的产品图像，这将具有不同的图像。我需要在jQuery中实现这一点。

Answer 1

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] +'); 

    });

使用jQuery在灯箱中动态更改图像

1 个答案: