时间戳

首页 > 解决方案 > Jquery 认为我的元素可见，即使显示设置为无和/或可见性设置为隐藏

html - Jquery 认为我的元素可见，即使显示设置为无和/或可见性设置为隐藏

问题描述

请看一下我在下面创建的示例。当您单击该按钮时，将<g>切换并显示或隐藏绿点。

奇怪的is(':visible')是，即使visibility设置为， 总是返回 true hidden。

为什么会这样？

console.log('Jquery running...')

$("button").click( () => {
  var prev = $("g").attr('visibility');
  if (prev === 'hidden') {
$('g').attr('visibility', 'visible');
  } else {
$('g').attr('visibility', 'hidden');
  }

  console.log('element is visible:', el.is(':visible'));
});

var el = $('g');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>My Example</p>

<svg width="20" height="30">

<g>
<circle cx="10" cy="10" r="10" fill="green"></circle>
</g>
</svg>

<button> Toggle Dot </button>

更新

我也尝试过更早的设置display，none但也没有用

标签： htmljquerycsssvgdisplay

解决方案

切换circle作品的可见性

jQuery源代码：

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

这里offsetWidth, offsetHeight, getClientRects()返回元素null_g

console.log('Jquery running...')

$("button").click(() => {
  el.toggle();

  console.log('element is visible:', el.is(':visible'));
});

var el = $('g circle');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>My Example</p>

<svg width="20" height="30">

<g>
<circle cx="10" cy="10" r="10" fill="green"></circle>
</g>
</svg>

<button> Toggle Dot </button>

推荐阅读