我可以在同一页面上使用具有不同选择器的相同 jQuery 语句吗？

Question

这可能看起来微不足道，但我遇到了一个小问题。我的页面上有 SVG 图标，当悬停在上面时，应该会更改状态以显示隐藏的 div。我得到了第一个图标来执行此操作，但随后的图标不起作用。我已将问题缩小到 jQuery，因为 css（光标：指针；）仍然适用于每个图标，但应该显示的隐藏 div 不适用。我的问题是这样的，我可以有多个这样的 jQuery 语句

$(".div-g").hover(
   function() {
     $(this).find(".div-hidden").css("display","block");
   },
   function() {
     $(this).find(".div-hidden").css("display","none");
   }
);

对于我的每个 SVG。例如，我会使用相同的语句，但只需将“div”替换为“div1”等等。我不明白为什么不这样做，但我不确定为什么它不像第一个图标那样简单。为清楚起见，我的每个 SVG 都有如下所示的类

<rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/>
<text style="display:none;" class="div-hidden" x="8" y="10">

看起来像这样的css

.div-g:hover {
text-align: center;
cursor: pointer;
}
.div-hidden {
text-anchor: middle;
text-align: center;
font-size: .5rem;
display: inline-block;
position: center;
}
.div-hidden-rect {
fill: $whiteblue;
opacity: .96;
}

其中 .div-g 代表 SVG 。那么，我的问题是使用具有不同选择器的相同 jQuery 语句，还是我没有看到的问题？

Answer 1

试试这个：

$('.div-g, .div1').hover(
  function(){
    $('.div-hidden').css({display: 'block'});
  }, function(){
    $('.div-hidden').css({display: 'none'});
  });

Answer 2

您的类选择器将匹配任意数量的具有匹配类的 div，例如：

<div id="div-1" class="svg-container">
  <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/>
  <text style="display:none;" class="div-hidden" x="8" y="10">
</div>

<div id="div-2" class="svg-container">
  <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/>
  <text style="display:none;" class="div-hidden" x="8" y="10">
</div>

<div id="div-3" class="svg-container">
  <rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/>
  <text style="display:none;" class="div-hidden" x="8" y="10">
</div>

选择所有具有类 .svg-container 的 div 应该可以正常工作。

$(".svg-container").hover(
   function() {
     $(this).find(".div-hidden").css("display","block");
   },
   function() {
     $(this).find(".div-hidden").css("display","none");
   }
);

单独设置它们的样式也很简单。您在 css 中使用了一个变量，所以我假设它是 LESS/SASS？

.svg-container {

    &:hover {
        text-align: center;
        cursor: pointer;
    }

    .div-hidden {
        text-anchor: middle;
        text-align: center;
        font-size: .5rem;
        display: inline-block;
        position: center;
    }

    .div-hidden-rect {
        opacity: .96;
    }
}


#div-1 {
    .div-hidden-rect {
        fill: $whiteblue;
    }
}

#div-2 {
    .div-hidden-rect {
        fill: $somethingelse;
    }
}

#div-3 {
    .div-hidden-rect {
        fill: $somethingelseagain;
    }
}

Answer 3

如果我理解正确，您真正需要的只是$(this).find(".an-hidden").toggle();

$(".hover-change").hover(function() {
     $(this).find(".an-hidden").toggle();
});

.an-1 {
        fill: #2ea3e4;
      }
.an-g:hover {
	text-align: center;
	cursor: pointer;
}
.an-hidden {
	text-anchor: middle;
	text-align: center;
	font-size: .5rem;
	display: inline-block;
	position: center;
}
.an-hidden-rect {
	fill: #F8FDF7;
	opacity: .96;

}
.an-hidden-text {
	fill: #2ea3e4;
}
.an-hidden-smtext {
	margin-top: 1rem;
	font-size: .15rem;
	fill: #2ea3e4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="test_icon" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02">
  <defs>
    
  </defs>
  <title>analysis_icon</title>
  <g class="an-g hover-change">
    <rect class="an-1" width="14.02" height="14.02"/>
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/>
    <text style="display:none;" class="an-hidden" x="8" y="10">
      <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan>
      </text>-->

  </g>
</svg>
<svg id="test_icon2" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02">
  <defs>
    
  </defs>
  <title>analysis_icon</title>
  <g class="an-b hover-change">
    <rect class="an-1" width="14.02" height="14.02"/>
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/>
    <text style="display:none;" class="an-hidden" x="8" y="10">
      <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan>
      </text>-->

  </g>
</svg>
<svg id="test_icon3" data-name="Test Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.02 34.02">
  <defs>
    
  </defs>
  <title>analysis_icon</title>
  <g class="an-d  hover-change">
    <rect class="an-1" width="14.02" height="14.02"/>
    <rect style="display:none;" class="an-hidden an-hidden-rect" width="14.02" height="14.02"/>
    <text style="display:none;" class="an-hidden" x="8" y="10">
      <tspan x="50%" y="35%" dy=".1em" class="an-hidden-text">Text Title</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more text</tspan>
      <tspan x="50%" dy="1.9em" class="an-hidden-smtext">more more text</tspan>
      </text>-->

  </g>
</svg>