Javascript Slider 标题替换 html 的标题只是在第一个项目上工作

Question

嗨，我正在使用 jquery 工具构建一个滑块。这是我的代码 http://jsfiddle.net/SmW3F/5/

无论如何，问题是当您更新图像（主图像）时，每个拇指都会在悬停时更新主图像。

问题是标题仅适用于第一个项目..所有其他项目都没有更新标题..

这是这部分代码

var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").on("hover",function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");
    var tbtit = $("#tbtit").html();
    var tbdesc = $("#tbdescp").html();

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").stop(true, true).fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);
        wrap.find(".img-info h4").replaceWith(tbtit);
        wrap.find(".img-info p").replaceWith( tbdesc);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");

var count = 0;
var scroll_count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log(count);
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {

Answer 1

我发现您的脚本存在一些问题，但首先您的页面中有无效标记，因为您有多个 <div> 元素具有相同的 ID 为 tbtit 和 tbdescp。 ID 属性在 HTML 页面中应该是唯一的，因此应该将其更改为类。

现在在您的脚本中，您需要更改检索标题值和悬停以引用兄弟元素的图像描述的部分：

//THIS
var tbtit = $("#tbtit").html();
var tbdesc = $("#tbdescp").html();

//SHOULD NOW BE THIS
var tbtit = $(this).siblings('.tbtit').text();
var tbdesc = $(this).siblings('.tbdescp').text();

最后，当您更新主图像的文本时，您希望为 <h4> 和 <p> 标记设置内容，而不是完全替换它们，因此请使用 .text()

//THIS
wrap.find(".img-info h4").replaceWith(tbtit);
wrap.find(".img-info p").replaceWith( tbdesc);

//SHOULD NOW BE THIS
wrap.find(".img-info h4").text(tbtit);
wrap.find(".img-info p").text( tbdesc);