Javascript Slider title 将 html 替换为仅在第一个项目上工作的标题

Question

您好，我正在使用 jquery 工具构建一个 slider 。这是我的代码 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);