点击Jquery fadeIn fadeOut (数据攻击)

Question

我在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) {
          $( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active').find('img.active').fadeOut().removeClass('active);
        });

Answer 1

您需要将jQuery语句分解为：

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

在您的代码中，.find('img.active')将尝试搜索您选择的图像的后代，但不会找到匹配的图像，因为您想要的图像不是后代。另外，在您的' ()中遗漏了一个removeClass。

Answer 2

这里有一个小提琴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');
    }
});