jquery img 和 img 标题交换答案

【问题标题】：jquery img and img title swapjquery img 和 img 标题交换
【发布时间】：2013-01-25 07:44:42
【问题描述】：

我有一个图片库，可以在单击缩略图时交换主图片。我也希望在单击时将 img 标题显示在主图像上方的 div 中。图像交换正在使用此代码。我是 jquery 的新手，所以非常感谢任何帮助。

$(document).ready(function() {
$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
});

var imgSwap = [];
 $("#gallery li img").each(function(){
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);   
});

$(imgSwap).preload();
});

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

<div class="wrap">
<div id="gallery">
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="940" height="534" id="main-img" />
<ul>
  <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="220" height="125" /></li>
</ul></div></div>

【问题讨论】：

你能用jsfiddle把链接贴在这里吗？

标签： jquery title swap

【解决方案1】：

你可以这样做

<html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){ 
            $("#thumb_gallery > li > img").click(function(){ 
                $("#caption").html($(this).attr('title'));
            });
        });
    </script>
    </head>
    <body>
    <div id="gallery">
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="500" height="200" id="main-img" />
<ul id="thumb_gallery">
  <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="20" height="12" /></li>
</ul></div>

    </body>
</html>

我已经更改了测试的大小

【讨论】：

我添加了这个并且它有效！谢谢你。 $("#thumb_gallery > li > img").first().click();
@LouisaTracey 尝试阅读我添加到问题中的评论。

【解决方案2】：

试试这个，

$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
    $("#caption").html($(this).attr('title'));
});

【讨论】：

【解决方案3】：

我认为这应该更好：

$(document).ready(function(){

    // for each element exists now and will be added in the future and is matched by this selector, will add a click function that does the work
    $("#gallery li img").live("click", function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
        $("#caption").html($(this).attr('title'));
    });
    $("#gallery li img").first().click();
}

【讨论】：

太棒了！非常感谢。第一张图片是否可以在不点击的情况下显示其标题？它只是保持空白，直到再次点击。
使用这个：$("#gallery li img").first().click();