我正在制作一个表单生成器,我想更改外观,例如内容的颜色。当类等于 active 时,文本应为白色,但当其余类不处于事件状态时,文本应为黑色。
如何使用生成的 2 类执行此操作?
无论如何,我在这个论坛上找到了一些东西,但它似乎对我不起作用:
$('.game-star').addClass('game-star2').removeClass('game-star');.game-star ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
.game-star2 ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
<div class="game-star" style="height: 198px; overflow: hidden;">
<ul>
<li class="Active">
<div class="game-star-icon"></div>
<!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> -->
<h3 class="winner-name">Major Millions<br>
RMB 1000.00</h3>
<!-- <p>RMB 625.78</p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah<br>
RMB 3,266.41</h3>
<!-- <p></p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah Isis<br>
RMB 4,982.78</h3>
<!-- <p></p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">发大财<br>
RMB 8,888.88</h3>
<!-- <p>RMB 396.42</p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">我发我发我发发发<br>
RMB 9,999.99</h3>
<!-- <p>RMB 28.89</p> -->
</li>
</ul>
</div>
my CSS :
最佳答案
您可以使用一个并利用 CSS Attribute Selector 而不是使用两个不同的 CSS 类.此选择器应用于您希望使用它的 CSS 选择器,例如 .game-star ul li[class=Active]。它告诉 CSS 查找名称为 game-star 的元素,该元素的子节点为 ul 并且 ul 的子节点为li 的子节点 WITH class=Active 的属性。它可以方便地简化必须使用 JavaScript 完成的事情。
因此,无需使用 JavaScript 管理和更改类名,您只需添加或删除 li 上的属性 class=Active。现在,我给你的例子实际上是一个不好的例子。好的做法是像这样 .game-star ul li[data-active=Active] 更像是一种正确的做法。您永远不想在属性选择器中使用CLASS ATTRIBUTE 的原因是什么?因为它已经以这种方式构建... .game-star ul li.Active 您可以将选择器、名称和 ID 组合在一起以添加更多重点 在你的目标上。您可以阅读更多相关信息 here .
所以我对您的代码的建议是:
HTML
<div class="game-star" style="height: 198px; overflow: hidden;">
<ul>
<li data-active="true">
<div class="game-star-icon"></div>
<!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> -->
<h3 class="winner-name">Major Millions<br>RMB 1000.00</h3>
<!-- <p>RMB 625.78</p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3>
<!-- <p></p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3>
<!-- <p></p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">发大财<br>RMB 8,888.88</h3>
<!-- <p>RMB 396.42</p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">我发我发我发发发<br>RMB 9,999.99</h3>
<!-- <p>RMB 28.89</p> -->
</li>
</ul>
</div>
CSS
.game-star ul li[data-active=true] h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
编辑: 如果您仍然希望按照自己的方式进行操作,请在此处为您准备 fiddle 。请记住将颜色更改为您想要的颜色! :)
关于javascript - 如果 ul li 类处于事件状态,jQuery 将一个类替换为另一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39694738/
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta
我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?
当我的预订模型通过rake任务在状态机上转换时,我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用,我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested
我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同,我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat
我有一个正在构建的应用程序,我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是,在make_tires内部有一个错误,如果我为Tire尝试它,则没有用于创建或新建的activerecord方法。当我检查轮胎时,它没有这些方法。我该如何补救?错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发,它们都因相同的错误而失败。 最佳答案