通过 jQuery 添加类后设置类的样式
Styling a class after added via jQuery
我正在尝试根据单击或不单击的内容来设置按钮的样式。更准确地说,我有一个按钮,它在正常状态和悬停状态下有一些 CSS 样式(不重要),当单击它时,会向其添加某个类(在我的情况下selected
)。
如果该类添加了另一个CSS样式,则应对其应用另一种CSS样式。好吧,我有JavaScript(它更像jQuery),它将我需要的类添加到按钮和CSS样式中。但似乎什么都没有发生。
我将粘贴一些代码,以便您可以看到我为此使用的内容,但我会将链接粘贴到实际工作内容。
/*
The jQuery used for adding the class
I'm using log() to check if anything happens, but only till I make it work
*/
var iqns = $(this).find('.iqn');
$(iqns).each(function() {
var iqn = $(this).parent();
$(iqn).on('click', function() {
if($(this).hasClass('.selected')) {
log('Rmoved / Added Class');
$(this).removeClass('.selected');
$(this).addClass('.selected');
} else {
log('Added Class');
$(this).addClass('.selected');
}
});
});
<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->
<div id="509247" class="product-wrapper">
<div class="product">
<div class="description">
<div class="thumb">
<i class="icon">
<img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
<span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
<img src="assets/gfx/zoom-icon.png" alt="Zoom">
</span>
</i>
</div>
<div class="info">
<div class="sales">
<div class="icon">
<img src="assets/gfx/sales-icon.png" alt="Sales Icon">
</div>
<div class="text">
<p>2</p>
</div>
</div>
<div class="rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
</div>
</div>
</div>
<div class="purchase">
<div class="info">
<i class="icon">
<i class="iqn"></i>
<span class="tooltip">$ 7</span>
</i>
</div>
<div class="proceed">
<a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
</div>
</div>
</div>
</div>
/*
Some of the CSS ( it is actually LESS )
*/
.icon {
position: relative;
margin: 0px auto;
margin-top: 12px;
margin-left: 12.5px;
display: block;
cursor: pointer;
.dimensions(35px, 35px);
.background(@noise-monochrome, #323b43, #242a30);
.border(1px, 1px, 1px, 1px, #242a30);
.border-radius(25px, 25px, 25px, 25px);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
.text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);
.iqn {
position: relative;
margin: 0px auto;
display: block;
.dimensions(35px, 35px);
.background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
}
.tooltip {
position: absolute;
display: block;
top: 0px;
left: 40px;
pointer-events: none;
.dimensions(50px, 35px);
.background(#1f252a);
.border(1px, 1px, 1px, 1px, #1a1f23);
.border-radius(5px, 5px, 5px, 5px);
.font-format(Arial, 16px, normal, bold, normal);
.text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
.opacity(0);
.transition (all, 0.25s, ease-in-out);
}
.tooltip:before {
position: absolute;
top: 7.5px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #1f252a;
content: '';
z-index: 5;
}
.tooltip:after {
position: absolute;
top: 6.5px;
left: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid #1a1f23;
content: '';
z-index: 0;
}
&:hover {
.background(@noise-monochrome, #3c4750, #2c353c);
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
}
&:hover > .tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
&.selected {
.background(@noise-monochrome, #2c353c, #3c4750);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
.tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
}
}
但是我粘贴的内容不会很有帮助,可能链接会更有帮助: 锚定 ; 导航到商店页面。
如果有人可以帮助我确定问题,我将不胜感激,我不太擅长使用控制台,也许这会对我有很大帮助。
你不需要设置一个点(.
)来添加新类,删除,代码应该可以工作。
$(this).removeClass('selected');
相关文章:
- 对插件初始化后动态加载的元素进行样式设置
- 使用jQuery按条件将样式设置为html标记
- 将 href 样式设置为按钮
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 根据用户输入声明样式设置
- 更改:在使用Javascript进行样式设置之前
- 反应:使用内联样式设置所有元素的样式
- 在AngularJS中构建SPA应用程序与纯JavaScript - 选择哪种Boostrap进行样式设置
- 我将如何使用CSS3对动态创建的jQuery UI元素进行样式设置
- Tumblr JS嵌入CSS/HTML标签进行样式设置
- 如何使用 ng 样式设置元素宽度 % 的样式
- 如何使用 Web 浏览器控件进行样式设置,但具有 C# 中的逻辑
- 从 javascript 获取样式设置时出现问题
- 样式设置 jQuery 验证错误消息
- 使用 React-Toolbox 的按钮进行样式设置不起作用
- 如何将离子输入类型文件的样式设置为按钮
- 如何将加载到<对象>中的元素样式设置为数据
- CKEDITOR没有't对来自数据库的文本进行样式设置
- 如何对一个元素进行ng样式设置's$索引由ng repeat创建
- D3可以't将样式设置为带标题的对象