0

下面是 Html 结构。现在我想在单击或使用 Jquery时获取 Div ID Inner_1_0、Inner_1_1、Inner_1_2、Inner_1_3等。那我应该怎么找回。nextButtonprevButton

更多我给了演示链接..请看演示 

<div id="Inner_1_0" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_1" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_2" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_3" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>

<div class="nextButton"></div>
<div class="prevButton"></div>

演示链接。

4

5 回答 5

1

如果您能够获取当前选定的项目，那么我们可以通过以下代码获取下一个和上一个项目

//For Next 
          var nextdivId = $(selectedItem).next().attr("id");
//For Prev
          var prevdivId = $(selectedItem).prev().attr("id");

如果你有任何问题，请告诉我。

于 2013-03-05T07:03:37.293 回答
1

您可以使用after轮播的功能，例如：

$('.carousel').carousel({
    carouselWidth: 930,
    carouselHeight: 330,
    directionNav: true,
    shadow: true,
    buttonNav: 'bullets',
    after: function(obj) {
       alert( $("div.slideItem").eq(obj.current).attr("id") );
    }
});

更新了小提琴演示

于 2013-03-05T07:11:54.870 回答
1

看起来你应该为此使用轮播回调函数（之前/之后）。

before: function (carousel) { alert(carousel.current)},

检查下面的jsfiddle。

http://jsfiddle.net/4HSpH/10/

于 2013-03-05T07:14:03.453 回答
0

这会设置一个计数器并在按下按钮时提醒幻灯片的 ID：

var current_slide = 0;
$(".nextButton").click(function() {
    alert($(".slideItem")[current_slide].id;
    current_slide++;
}
于 2013-03-05T06:53:56.263 回答
0

那么你可以使用

var ids = $("#container").children().map(function(n, i) {
  return n.id;
});

或每个（）：

var ids = $("#container").children().each(function(n, i) {
  var id = this.id;
  //your code
});

这里'容器是承载所有这些 div 的 div

于 2013-03-05T06:57:50.483 回答