根据div名称更改span标记中的标题

问题描述：

我在我的页面上使用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>

只有1张是活动的时候，我想以某种方式寻找下一个div的名称，并编写成“测试”跨度标记，以便它显示了悬停，如果点击跨度标签会得到下一个div的名称并更新自己，这是否有意义？感谢

ADDED 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')); 
    });

ü可以用jQuery – 2012-01-06 10:08:23

的jsfiddle代码都做了，谢谢... – Liam 2012-01-06 10:15:38

什么是_The名_？你想要在span标签中的div的内容？ – 2012-01-06 10:26:32

答

这是给你一个良好的开端：

$("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")); 
});

到可以做出许多要点：

这在选择第一项时不适用于prev箭头。
我不确定你想要的类名的哪一部分，所以你需要做一些修改
它需要在悬停或插件本身，因为有其他方法来控制旋转木马。因此，点击设置不会一直工作。

啊，辉煌，非常感谢！ – Liam 2012-01-06 11:04:46

答

一种方法是在你的选择的div添加活动类：

//e.g. after the selection event occurs: 
$('div').click(function() { 
    $(this).addClass('active'); //keep track which div is clicked with the active class 

    //read the class name of the next sibling and store it in test (if i got it right) 
    $(".Test").html($('.active').next().attr('class')); 
});

也许不是100％正确，但可以给你一个开头！

谢谢Vosobe ... – Liam 2012-01-06 10:23:15

我试过这个没有运气... $（'。arrows'）。click（function（）{ \t $（“。（）.html（$（'。roundabout-in-focus'）。next（）。attr（'class'））; （）'; attr（'class'））; \t \t}）; – Liam 2012-01-06 10:28:02

答

根据你的jsfiddle name属性上的回旋处丢失，试试这个：

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

答

该插件提供了在点击“下一个” /“上一页”按钮后执行的回调btnNextCallback和btnPrevCallback被点击。

当前重点项目的类别为.roundabout-in-focus。（你所有的div都有相同的内容，所以为了示例的缘故，我已经替换了它）。我们已经制作了这个jsfiddle。

这里的（注释）代码：

$(document).ready(function() { 

    function updatePrevNextTitle() { 

     // as this function is used as a callback for the plugin 
     // 'this' is the roundabout wrapper div 

     var $wrapper= $(this), 

      // get the currently focused div 
      $frontDiv = $wrapper.find('.roundabout-in-focus'), 

      // get the next/prev div content relative to the focused div 
      // also handle the circular roundabout by checking if 
      // .next() and .prev() return something, otherwise 
      // get .first() and .last() 
      nextContent = $frontDiv.next().length 
          ? $frontDiv.next().find('.carousel-caption').html() 
          : $frontDiv.first().find('.carousel-caption').html(), 
      prevContent = $frontDiv.prev().length 
          ? $frontDiv.prev().find('.carousel-caption').html() 
          : $frontDiv.last().find('.carousel-caption').html(); 

     $wrapper.find('.next span').html(nextContent); 
     $wrapper.find('.prev span').html(prevContent); 
    }; 

    $('#round').roundabout({ 
     childSelector: 'div.box', 
     btnNext: ".next", 
     btnPrev: ".prev", 
     // set the method updatePrevNextTitle as the callback handler 
     btnNextCallback: updatePrevNextTitle, 
     btnPrevCallback: updatePrevNextTitle 
    } 
    // set it also as the 'initialized' callback for the 
    // initial setting of the prev/next span text 
    ,updatePrevNextTitle); 

});

根据div名称更改span标记中的标题

相关推荐