Javascript Jquery fadeIn单击时淡出（数据属性）

我在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>

---

您需要将jQuery语句分解为：

$('.toggle_points li').click(function (e) {
    $('img.glasses.active').fadeOut().removeClass('active');
    $( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active');
});

在代码中，

.find（'img.active'）

将尝试搜索所选图像的子体，但找不到匹配项，因为所需图像不是子体。另外，您在removeClass（）中漏掉了一个

“

。

这里有一个提琴，它可以引导您朝正确的方向前进，还可以缓存要选择的元素以创建变量

$('.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');
    }
});

---

你注意到打字错误了吗？它应该是：

.removeClass（'active'）

在代码中添加类active，然后删除，因为

$（'img.glasses.active'）

将matched@marsh-接得好。需要交换的行。@j08691，如果li是当前li，是否也可以添加和删除类？@RMH-您的意思是如果有人单击已激活/当前列表项？是的，因此运行此操作后，图像处于活动状态，其数据属性列表项也将被删除

$('.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');
    }
});