我正在工作的一节,我需要给颜色的图像时,揭示的内容。
下面是代码的一个例子:
jQuery(function($){
var revealButtons = {
'.rv_button_1-do': '.rv_element_1-do'
};
$.each(revealButtons, function(revealButton, revealElement) {
$(revealButton).click(function(e){
e.preventDefault();
$(revealElement).slideToggle();
$(revealButton).toggleClass('rotateicon img-color');
});
});
});
body:not(.et-fb) .rv_element-do { display: none; }
.img-color {
filter: grayscale(100%);
}
.rv_button_1-do{
background-color: blue;
padding: 12px 20px;
color: white;
width: 200px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img decoding="async" loading="lazy" src="https://media.npr.org/assets/img/2017/01/18/red-turtle_wide-03029731def2957b2fb69fb27e44c5c2e456f4a6-s800-c85.webp" width="80" height="165" alt="" class="img-color">
<p>Example text</p>
<div class="rv_element-do rv_element_1-do">
<p>Helps to fund ten (10) Estuary pop-up outreach events, or one (1) water-quality testing location kit for an entire year, or a day of seagrass monitoring in the field. Included with this donation:</p></div>
<div class="rv_button_1-do"><a>button reveal</a></div>
我试图在打开内容的那一刻添加一个类,并删除添加的过滤器,但一直没有成功。
1条答案
按热度按时间xoshrz7s1#
您不必删除.img-color类,而只需分配一个新的类来覆盖滤镜:
只需将'img-revealed'赋值给回调中的图像,如下所示: