Question

我在html中有以下滑块代码;

<div class="carousel-inner" style="position: relative;">

<div class="item">
    <img src="forsidebanner_gf39.jpg" alt="">
    <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 101.4%; height: 103.31491712707%;" href="domain.com" title="">
    </a>
</div>
<div class="item active">
    <img src="forsidebanner_50fifty_somvistpaafarmen.jpg" alt="">
    <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 100.8%; height: 102.76243093923%;" href="domain.com/one.html" title="">
    </a>
</div>

我想要实现的是控制日志类的#dc;项目＆＃34;例如，如果点击父类的图像1＆＃34; item＆＃34;它将打印1，如果点击第二个图像，它将打印2。

我尝试了这段代码，但只打印了1个

$(".item").click(function(){
var numitem = $(this).length;
    console.log(numitem);

});

这是演示链接 - ＆gt; https://jsfiddle.net/ru44voeq/ 任何帮助将受到高度赞赏。

由于

Answer 1

问题在于重叠。因此，您无法检索单击元素的索引。因为你无法通过移除html来隐藏它们，所以jquery会处理它。

由于隐藏了叠加层，因此您无法导航到您的网址。通过检索URL属性

set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_25 set PATH=C:\Program Files\Java\jdk1.8.0_25\bin;%PATH%

从再次显示的叠加层

可以显示页面。

完整的jquery代码和示例，

小提琴示例：https://jsfiddle.net/eugensunic/ru44voeq/3/

window.location.href = $(this).find(".overlay").attr("href");

Answer 2

使用index()功能可以解决问题，但问题中的style overlays类似 @GrafiCode Studio ，因此在删除{时{1}}该链接不起作用，这是真的。

尝试使用此解决方案复制style代码并删除原始代码并将img的副本附加到链接，它的工作原理见下面的代码。

img

//Restructuring the HTML code on ready 
$(".carousel-inner").find('.item').each(function(){
  //make a copy of img
  var img = $(this).find('img').clone(true);

  //remove image
  $(this).find('img').remove();

  //append copy to the link
  $(this).find('a').removeAttr('style').html(img);    
});

//Handle the click event
$(".item").click(function(){
    var numitem = $(this).index()+1;
    alert(numitem);
});

希望这有帮助。

Answer 3

您可以使用inArray函数来解决此问题。看看下面的代码。

$(".item").click(function(){

    console.log($.inArray(this,$(".item")));

});

执行此操作，您将向每个项目添加click事件。函数inArray使用第一个参数上的元素，在这种情况下是项目，以及第二个参数上的元素列表，此函数将返回给定数组上项目的索引。

Answer 4

您正在为每个项目设置点击侦听器。

当执行回调函数时，上下文（this引用的是）被点击的元素，即节点本身。

然后在$(this)节点上调用jQuery函数，该函数返回一个jQuery元素，其中只包含该节点。这就是length为1的原因。

如果你想得到.item你应该做的事情的数字：

var items = $('.item')
items.click(function (){
    .....
    items.length //number of items
    $(this).index() //index of the node in its parent, not relative to the `.items`
    var itemIndex = $.inArray(this, items) //as suggested by @Franklin Satler
})

docs说：

在数组中搜索指定的值并返回其索引（如果未找到则返回-1）。

使用jquery获取div的位置号

4 个答案: