1

递增到下一个列表项以输出下一个 href 然后使用该值更改图像 src 时，我遇到了一些非常奇怪的问题

它会追踪并进入下一个项目，然后如果我继续单击下一个箭头，它会增加？？？下面是我所有的代码，所以除了我写的不正确之外，没有其他可能导致问题的东西。

这个概念与灯箱相同。我也会有以前的箭头。

HTML：

<div role="main" id="main">
<div id="boxes">
  <ul>
         <li><a href="img/lrgimgs/1.jpg" class="lightbox"><img src="img/thumbs/1.jpg"></a></li>
         <li><a href="img/lrgimgs/2.jpg" class="lightbox"><img src="img/thumbs/2.jpg"></a></li>
         <li><a href="img/lrgimgs/3.jpg" class="lightbox"><img src="img/thumbs/3.jpg"></a></li>
         <li><a href="img/lrgimgs/4.jpg" class="lightbox"><img src="img/thumbs/4.jpg"></a></li>

   </ul>
 </div>
  <div class="nextArrow>next</div>
  <div class="previousArrow>previous</div>
</div>

查询：

 var incrementVar = 0;

 $(".nextArrow").click(function() {
        incrementVar++;
        var hrefa=$('#main').find('#boxes ul li a:eq(' + incrementVar + ')').attr('href');
        $("#thumbnail").attr('src', hrefa); //I am loading the outcome of my hrefa var into another div

 });
4

1 回答 1

1

这是一个工作小提琴：http: //jsfiddle.net/Mq3wF/

HTML：

<div role="main" id="main">
<div id="boxes">
  <ul>
         <li><a href="img/lrgimgs/1.jpg" class="lightbox"><img src="img/thumbs/1.jpg"></a></li>
         <li><a href="img/lrgimgs/2.jpg" class="lightbox"><img src="img/thumbs/2.jpg"></a></li>
         <li><a href="img/lrgimgs/3.jpg" class="lightbox"><img src="img/thumbs/3.jpg"></a></li>
         <li><a href="img/lrgimgs/4.jpg" class="lightbox"><img src="img/thumbs/4.jpg"></a></li>

   </ul>
 </div>
  <div class="nextArrow">next</div>
  <div class="previousArrow>previous</div>
</div>​​​​​​

Javascript：

var i = 0;
var hrefa;
$(".nextArrow").click(function() {
     hrefa = $("li").find("a").eq(i).attr("href");
     i++;
    alert(hrefa);
 });​
于 2012-08-02T15:02:48.670 回答