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

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

    });