Jquery fadeIn fadeOut on click (data attr)
Jquery fadeIn fadeOut on click (data attr)
我的html中设置了以下内容:
<div class="col-sm-8">
<img id="click-1" class="glasses one active" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png"/>
<img id="click-2" class="glasses two" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:red;"/>
<img id="click-3" class="glasses three" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:blue;"/>
<img id="click-4" class="glasses four" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:pink;"/>
<ul class="toggle_points">
<li data-toggle-target="click-1">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-2">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-3">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-4">
<div class="circle"><div class="inner_circle"></div></div>
</li>
</ul>
</div>
我希望根据点击淡入和淡出图像。 我让他们与数据属性和 ID 共享连接。
我觉得我目前的jquery走在正确的道路上,但我肯定错过/忘记了一些东西
$('.toggle_points li').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active').find('img.active').fadeOut().removeClass('active);
});
你需要把你的jQuery语句分解为:
$('.toggle_points li').click(function (e) {
$('img.glasses.active').fadeOut().removeClass('active');
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active');
});
在代码中,.find('img.active')
将尝试搜索所选图像的后代,但找不到匹配项,因为所需的图像不是后代。此外,您在 removeClass() 中遗漏了一个'
。
这是一个小提琴 https://jsfiddle.net/k53k9ydy/,它应该引导你朝着正确的方向前进,并将你选择的元素缓存到变量中。
$('.toggle_points li').on('click', function (e) {
var $this = $(this);
var el = $(this).data('toggleTarget');
if ($this.hasClass('active')) {
$('#' + el).fadeIn().toggleClass('active');
$(this).toggleClass('active');
} else {
$('#' + el).fadeOut().toggleClass('active');
$(this).toggleClass('active');
}
});
相关文章:
- Ember Data DS.Model's set函数不起作用
- Extending Ext.data.NodeInterface
- 如何获取$data.Entity的密钥
- jQuery可以't获取data-*属性值,返回undefined
- Query JS Ext.data.Store
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- jQuery中的attr()是否强制小写
- 设置'这'在React with Inverse Data Flow中
- jQuery.data('itemname')不工作,但jQuery.attr('data it
- 获取点击按钮的值/attr作为event.data,带有.on(“点击”…)
- Jquery fadeIn fadeOut on click (data attr)
- jQuery data() 返回 undefined,attr() 返回整数
- Javascript在X秒后使data-attr中的图像成为内联背景图像
- data-rel in .attr (javascript)
- 它是如何工作的?target=$this.attr('data target')|| e.prevent
- 访问JS属性-数据.Att vs. data["attr"]
- 使用data attr value获取其他data attr值
- jQuery Data vs Attr?
- 让Jquery记住attr()和data
- 为什么我不能像在Jquery dom节点构造中.attr()那样内联.data()呢?