javascript - 根据 div 名称更改 span 标签中的标题

Question

我有一个问题我想不通。

我使用 jquery 在我的页面上放映幻灯片。

<div id="carousel">
    <div id="round">
       <div class="box box-sec">
           <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="box box-easy">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box competitive">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box personal">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box business">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box affiliate">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="arrows">
        <div class="next"><span>Test</span><img src="_includes/images/icons/rarr.png" /></div>
        <div class="prev"><span>Test</span><img src="_includes/images/icons/larr.png" /></div>
      </div>
      </div>
    </div>
    </div>

一次只有一张幻灯片处于事件状态，我想以某种方式找到下一个 div 的名称，并将其写入“测试”span 标签，以便它在悬停时显示，如果单击 span 标签，则会得到下一个 div 的名称并更新自身，这有意义吗？谢谢

---

添加了 fiddle http://jsfiddle.net/TNRMk/

---

我试过了，没有成功

$('.arrows').click(function() {
        $(".next span").html($('.roundabout-in-focus').next().attr('name'));
        $(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
    });

Answer 1

这对你来说是一个好的开始:

$("div.arrows div").bind("mouseover", function() {
    $("div.arrows div.next").children("span").text($("div.roundabout-in-focus").next("div").attr("class"));
    $("div.arrows div.prev").children("span").text($("div.roundabout-in-focus").prev("div").attr("class"));
});

一些要点:

1. 当第一个项目被选中时，这对上一个箭头不起作用。
2. 我不确定你想要类名的哪一部分，所以你需要做一些修改
3. 它需要悬停，或者在插件本身中，因为还有其他方法可以控制轮播。因此点击设置不会一直有效。