Question

这看似微不足道，但我遇到了一个小问题。我的页面上有SVG图标，当盘旋时，应该更改状态以显示隐藏的div。我得到了第一个图标来执行此操作，但后续图标无效。我已经将问题缩小到了jQuery，因为css（cursor：pointer;）仍然适用于每个图标，但隐藏的div应该显示不会。我的问题是，我可以有多个这样的jQuery语句

protocol MyType {}
extension UInt8: MyType {}

extension Array where Element: MyType & UnsignedInteger {
    mutating func superfluouslyReplaceAllElements(with value: Element) {
        self = self.map { $0.advanced(by: $0.distance(to: value)) }
    } /* using 'advanced(by:)' and 'distance(to:)' methods of
         'Element', blueprinted in 'UnsignedInteger', to which 
         'Element' conforms */

    mutating func elementsSquaredWithOverflow() -> Bool {
        var overflow = false
        self = self.map {
            let result = Element.multiplyWithOverflow($0, $0)
            overflow = overflow || result.overflow
            return result.0
        }
        return overflow // did at least one element cause an arithmetic overflow?
    }
}

var foo: [UInt8] = [14, 87, 13, 240]
print(foo.elementsSquaredWithOverflow()) // true (at least one arithmetic overflow)
print(foo) // [196, 145, 169, 0]

foo.superfluouslyReplaceAllElements(with: 42)
print(foo) // 42, 42, 42, 42

var bar: [UInt16] = [14, 87, 13, 240]
bar.superfluouslyReplaceAllElements(with: 42)
    /* error: type 'UInt16' does not conform to protocol 'MyType' 
       OK, as expected!                                           */

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

UInt8

和css看起来像这样

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

其中.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，例如：

public static String nameLeftValueRight(String leftValue, String rightValue) {
    return applyParametersToPrinter(leftValue, DataConstants.ALIGN_LEFT) +
            applyParametersToPrinter(rightValue, DataConstants.ALIGN_RIGHT);
}
 public static String applyParametersToPrinter(String data, byte[] param) {
    String s = new String(param);
    return String.valueOf(s) + data;
}

选择所有带有.svg-container类的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>

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

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

Answer 3

如果我理解正确，您真正需要的只是$(".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>

{{1}}

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

3 个答案: