Question

我有一组包含navLink类的标签。

<li><a href="whatever0.html" class="naviLink"><img src="some-image0.jpg" /></a></li>
<li><a href="whatever1.html" class="naviLink"><img src="some-image1.jpg" /></a></li>
<li><a href="whatever2.html" class="naviLink"><img src="some-image2.jpg" /></a></li>

我有另一个页面区域，其中包含相同数量的元素（在本例中为3）。它们的顺序相同。

<div id="main_navi">
<ul>
<li>Some Content 0</li>
<li>Some Content 1</li>
<li>Some Content 2</li>
</ul>
</div>

我正在使用的jQuery插件会自动将#main_navi中的所有内容转换为轮播类型系统中的链接。单击li标签时，它会滚动到与其关联的图像。我认为这种行为很好。

以下是我的问题： 我的客户以他们无限的智慧想要在您点击li以转到与该图像对应的页面时更改默认行为（在这种情况下，what.html链接中的内容。

到目前为止，我做到了这一点：

$("#main_navi li").click(function() {
  // to find out which li was clicked on
  var index = $(this).index();

  // then i want to grab what url it was referencing..
  alert($('.naviLink').eq(index).attr('href'));
  });

});

然而：当我点击第一个链接Some Content 0时，它会提醒最后一个链接的网址（whatever2.html）。我做错了什么？

Answer 1

您似乎错过了href的初始报价。

<li><a href="whatever0.html" class="naviLink"><img src="some-image0.jpg" /></a></li>
<li><a href="whatever1.html" class="naviLink"><img src="some-image1.jpg" /></a></li>
<li><a href="whatever2.html" class="naviLink"><img src="some-image2.jpg" /></a></li>

编辑：这应该包括你。

$("#main_navi li").on("click", function() {
    alert($('.naviLink').eq($(this).index()).attr('href'));
});

JSFiddle

Answer 2

你可以试试这个

$("#main_nav li").click(function () {
    var index = $(this).index();

$('.naviLink').each(function(index2){

if(index == index2)
{
     alert($(this).attr('href'));
}

});

});

Answer 3

它对我没用。我的HTML代码是

<input type="button"   class="buttonclose  marleft fleft clrPric" value="X">
<input   type="button"   class="buttonclose  marleft fleft clrPric" value="X"> 
<input type="button"  class="buttonclose  marleft fleft clrPric" value="X">
<input type="button"   class="buttonclose  marleft fleft clrPric" value="X">

我给了jquery $（'。clrPric'）。click（function（）{console.log（$（this）.index（））;}）;

它在控制台中只显示7个。没有此类的其他元素。我想获得点击按钮的数量。

使用jQuery的类的索引

3 个答案: