Question

<div class="parent">
   <div class="parent.child">
      <a href="#"></a>
      <div class="parent.chil.child">
          <div class="parent.chil.child.child">
               <img src ="link0" >
               <img src ="link1" >
               <img src ="link2" >
          </div>
      </div>
   </div>
   <h4>
      <a href= "aspPage.aspx">text</a>
   </h4>
   <div class="imgClass0">
       <p>some text</p>
    </div>
   <div class="imgClass1">
       <p>some text</p>
    </div>
   <div class="imgClass2">
       <p>some text</p>
</div>

嘿伙计们！

我有问题。我有一个div，我可以有一个或多个<img>节点，取决于服务器如何生成DOM（可以有一个或多个，取决于数据库中的数字。 <div>节点下有几个<h4>元素，它们的数量等于上面<img>个元素的数量。

我需要帮助制作一个javascript，当我悬停<img src ="link1" >时，“imgClass1”可见，而另一个imgClassX，X =（1..n）不可见，依此类推。我给他们默认的可见性display:none，但我需要imgClass0来默认visibility:visible.

祝你好运， iusmar。

Answer 1

试试这个

$("img[src=link1]").hover(function(){
$("div[class^='imgClass']").hide();
$(".imgClass1").show();
});

fiddle

Answer 2

首先，您应该在图像上放置一个类作为选择器。您还应该将图像ID作为数据属性放在标记上。这将允许您在悬停这些图像时轻松分配事件处理程序，并且还可以轻松提取图像ID：

<img src="link0" class="yourImages" data-image-id="0">
<img src="link1" class="yourImages" data-image-id="1">
<img src="link2" class="yourImages" data-image-id="2">

您也可以将该ID应用于div：

<div class="images" data-image-id="0">
    <p>some text</p>
</div>
<div class="images" data-image-id="1">
    <p>some text</p>
</div>
<div class="images" data-image-id="2">
    <p>some text</p>
</div>

然后你可以将hover处理程序绑定到yourImages类，从hovered元素中获取ID，隐藏所有图像div，然后只显示所需的图像：

$('.yourImages').hover(function() {
    var imageID = $(this).data('image-id');

    $('.images').hide();
    $('.images[data-image-id="' + imageID + '"]').show();
}, function() {
    $('.images').hide();
});

当您停止悬停在任何图片上时，您想要做什么？我的例子再次隐藏了它们。

Answer 3

您可以将starts with选择器与:eq()选择器一起归属：

$('img[src^=link]').hover(function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').show();
}, function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').hide();
});

<强> Fiddle Demo

Answer 4

为图像添加类/ ID，如下所示

 <img class="img0" src ="link0" >
    <img class="img1" src ="link1" >
    <img class="img2" src ="link2" >

并尝试以下javascript

$("img").hover(function (){     
            var cls=$(this).attr("class");
            $("div[class^='imgClass']").hide();
            var visibleCls=".imgClass"+(parseInt(cls.replace("img","")));
            $(visibleCls).show();
        });

如何在悬停图像时使某个div可见？

4 个答案: