javascript - 在事件中更改 jQuery 的 $(this) 对象的值

Question

我想单击一个图像 (img#first) 并将其拆分为另一个图像 (img.cat) 的三个较小版本。每次单击 img.cat 时，它都会将克隆的元素抛向随机方向，并暂时显示一只狮子来代替被单击的 img.cat。

cat 复制和 lion 弹出窗口都正常工作(正如您可以通过单击左上角的小猫看到的那样)，但我不知道如何使它成为 上的 .click() 事件img#first 将调用该函数来复制较小的猫。重申一下，我希望 img#first 生成 3 个较小的 img.cat，然后消失，然后如果用户继续单击新的 img.cat objects 他们继续产生更多的自己。问题只是让原始 img#first 开始链式 react ，然后永远消失。

这是 Fiddle .

如果我能够使整个 .click(explode) 函数在 img#first 上运行，然后以某种方式将该标识符交换为 img。 cat 在最初的点击之后，这不就可以了吗？

例如:

var firstRun = 0
$('img#first').click(function() {
    if (!firstRun) {
        //do original stuff here
        firstRun = 1;
    } else {
        $(this) = $('img.cat');
        //do img.cat stuff here
    }
});

或者我是否需要隔离 explode 函数，以便它可以在两个不同的对象上分别调用，同时实现相同的效果？

老实说，我不知道如何着手完成这些任务中的任何一个。也许有更简单的方法来获得我想要的东西。

Answer 1

添加一个仅在单击 #first 时触发的单独事件，它以编程方式触发对 img.cat 的单击，然后像这样删除自身:

$('#first').click(function() {
    $("img.cat").trigger("click");
    $(this).remove();
});

Here is a working jsFiddle .