JQuery 属性包含选择器在 WebKit 中不起作用

Posted 2023-05-09

【中文标题】JQuery 属性包含选择器在 WebKit 中不起作用

【英文标题】：JQuery Attribute Contains Selector does not work in WebKit

【发布时间】：2014-02-14 15:20:11

【问题描述】：

我有一个生成一组圆圈的 javascript 可视化，其中一些（给定 fileTag 属性值“当前广告”）应该默认可见，其中一些（给定 fileTag 属性值“过去广告”）应该不是。一个示例圆如下所示：

<circle id="986" class="node" style="cursor: pointer; fill: rgb(171, 183, 71); display: block;" title="Title" r="6.345236822911981" fileTags="BRAND, CURRENT ADVERTISING" fileType="Print" fileDescription="Example" cx="833.5761873699519" cy="344.6269837191289">

为此，我使用以下代码：

$( ".node[fileTags*='PAST ADVERTISING']" ).css("display", "none");
$( ".node[fileTags*='CURRENT ADVERTISING']" ).css("display", "inline");
$( ".node:not([fileTags*='ADVERTISING'])" ).css("display", "none");

这在 Firefox、Opera 和 Internet Explorer 中可以正常工作。然而，在 Safari/Chrome 中，所有圆圈都被隐藏（使用上面的代码）或所有圆圈都被显示（如果我用 :not 删除第三行）。

我在代码中做错了什么，还是这是一个 WebKit 错误？如果是后者，对解决方法有什么想法吗？

【问题讨论】：

用老式的方式来做怎么样 -> jsfiddle.net/VV6Cf

@adeneo - 有时老式的方式是最好的方式。不得不在获取 fileTag 时做一些鬼混（它一直抛出未定义的内容，但这可能是我的环境的一个特性，而不是您的代码的问题） - 但是完成后，您的代码 sn-p 解决了我的问题实际问题。谢谢！ :)

【参考方案1】：

我听说 not 选择器可能有不同的结果...

我还没有尝试过，但是您尝试过类似的方法：

$( ".node[fileTags*='PAST ADVERTISING']" ).css("display", "none");
$( ".node[fileTags*='CURRENT ADVERTISING']" ).css("display", "inline");
$( ".node" ).not("[fileTags*='ADVERTISING']").css("display", "none");

编辑：

.not() 方法最终将为您提供比将复杂的选择器或变量推入 :not() 选择器过滤器更易读的选择。在大多数情况下，这是一个更好的选择。 通过http://api.jquery.com/not-selector/

【讨论】：

正如所写，该版本的事物导致所有圆圈在所有浏览器中都不可见。这在技术上更一致，但不是我想要的结果。

jsfiddle.net/g30rg3/nM2wh ...我实际上只能让我的解决方案在 Chrome 中工作。我的建议或您的原始代码在 ff 或 IE 中均无效。

这很奇怪，因为正如我在问题中所说，我的原始代码 确实 在其工作环境中的 IE/FF 中工作。我想知道你的实现有什么不同......

你用的是什么版本的jQuery？

我使用的是 1.9.1 版