javascript - Js， Bootstrap : Do action each time while opening tab

Question

我在 Bootstrap 选项卡中创建动画，每次选择每个选项卡时动画都应该起作用。但动画仅在第一次运行时有效，如果我打开其他选项卡并返回相同的选项卡，它就无法运行。

当然可以说，当我选择标签时，我会用动画显示新价格，但当我选择其他标签并返回同一标签时它不会重复。

在此处查看实际效果:https://jsfiddle.net/jn9v3j1c/

HTML:

 <div class="price">
             <h2 class="heading price-old">300</h2>
             <h2 class="heading fade price-discount">90</h2>
        </div>

JS:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab

    if (e.target) {
        $(this).siblings().children('.price-old').animate({
            fontSize: "30px"
        });
        $('.price-discount').addClass('in');
    }

});

请不要过多地评判我的代码，我是在 JS 中完成我的第一步 :) 谢谢

Answer 1

经过几次修复后，它似乎确实有效。

首先，jQuery 回调中的this 指的是捕获事件的元素。在这里，它是 a 元素，但您不需要 a 元素的 siblings。您想查找选项卡本身:

var tab = $($(this).attr("href"));

接下来，.price-old 不是(直接)子代，它是后代，您应该使用 find 方法:

tab.siblings().find('.price-old').animate({
        fontSize: "30px"
    });

然后它似乎可以工作，只有 30px 是原始大小，所以我将其更改为 20 - fiddle