属性选择器:无法将一个元素与另一个元素隔离

Posted

技术标签:

【中文标题】属性选择器:无法将一个元素与另一个元素隔离【英文标题】:Attribute Selector: Can't isolate one element from the other 【发布时间】:2013-10-26 14:55:30 【问题描述】:

我正在为一个网站使用 WP Easy Poll 插件,人们可以在该网站上为不同类别的候选人投票。当您使用此 WP Easy Poll 插件时,您单击被提名人的姓名,条形动画会显示投票数,或者您可以选择显示已计票的百分比。这是通过 jquery 和 php 完成的。

我希望人们能够在线投票,但我不希望他们在颁奖之前看到谁获胜。所以我认为一个简单的解决方法是使用属性选择器来隐藏投票数,但是当我这样做时,它会隐藏被提名者的姓名和投票。我不能只选择一个 - 有人可以帮忙吗?我什么都试过了:(

这是我试图用来隐藏 Dikla Carmel 旁边的“20%”的选择器:

div[data-myo-perc="yes"]display:none;

<div data-myo-poll-id="334" data-myo-clicked="yes" data-myo-option="0" data-myo-perc="yes" class="myo-poll-votes myo-poll-334 myo-poll-bar" id="myo-poll-334-votes-0" style="cursor: default;">Dikla Carmel 20%</div>

这不起作用。它会去掉被提名人的名字和“20%”。我要做的就是把“20%”隐藏到颁奖典礼的第二天,然后选民可以上网看看获胜者赢了多少。名称的属性是 id="myo-poll-340-votes-1" 所以我不明白为什么它选择名称和百分比。我什么都试过了。 . .

div[data-myo-perc*="yes"]display:none; ---> No good
div[data-myo-perc^="yes"]display:none; ---> No good
div[data-myo-perc~="yes"]display:none; ---> No good
div[data-myo-perc$="yes"]display:none; ---> No good

我正在尝试为客户执行此操作 - 但现在我开始感到困惑并且我已经没有想法了。 任何人都可以帮忙吗?我查看了js。和CSS。文件,什么都没有。

插件的demo可以看这里 --> WP Polling Link Demo

【问题讨论】:

也许现在最好的办法是破解插件,除非作者好心在该输出中放置一个钩子。 我想到了@brasofilo - 但我不知道在哪里。我试图完全删除 data-myo-perc 属性 - 它只出现在 3 个地方,但它无论如何都会显示??? 【参考方案1】:

如果未选中,您无法隔离部分文本。你需要一种方法来定位它。

jsFiddle here

这可以实现您想要实现的目标。它有效地隐藏了百分比,但显示了名称。

html

<div data-myo-poll-id="334" data-myo-clicked="yes" data-myo-option="0" data-myo-perc="yes" class="myo-poll-votes myo-poll-334 myo-poll-bar" id="myo-poll-334-votes-0" style="cursor: default;">Dikla Carmel<span>20%</span></div>

CSS

div[data-myo-perc="yes"] span 
    display: none;

【讨论】:

我想隐藏百分比并显示名称。所以你是说我必须回到 .js 文件并添加 span 标签? @SylviaAdams-Epley 这是唯一的方法。 谢谢 - 我不知道我能不能做到。我之前尝试过,它只是把所有东西都扔掉了。有一个 PHP 文件和一个 .js 文件,我不确定要破解哪个文件。 抱歉,我按错了按钮。这是我认为我需要更改代码的地方: 1500, function () if (a == "yes") b("#myo-poll-" + i + "-votes-" + f).append (" " + e + "%") 其他 谢谢@JoshC!您的 CSS 工作我找到了需要在 js 文件中添加 标记的行。谢谢!!谢谢!!谢谢!! if (a == "yes") b("#myo-poll-" + i + "-votes-" + f).append(" " + "" + e + "%" + "")

以上是关于属性选择器:无法将一个元素与另一个元素隔离的主要内容,如果未能解决你的问题,请参考以下文章

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

010. CSS 选择器

CSS选择器(属性选择器,关系选择器,伪类选择器,伪元素选择器)

用于选择具有空值属性的元素的 jQuery 选择器?

结合 CSS 属性和伪元素选择器?

CSS属性选择器