jquery - 我的 .click() 函数有问题

Question

我是这个论坛的新手，因此我会在不违反社区规则的情况下尽可能具体。我正在尝试开发一个使用 Flippy jQuery 插件的画廊。我已经安装了这个插件，效果很好。我现在想要实现的是找到一种方法来将触发事件的按钮分配给特定的 div，而不会将其重复到主体的所有其他 div。

在此链接中here您可以看到每个绿色按钮如何调用每个蓝色框的 Flippy 事件。问题是，当我单击任何绿色框时，Flippy 插件就会被调用，并且所有蓝色框都会立即受到影响，这绝对不是我想要的。我如何才能使一号绿盒调用一号蓝盒，依此类推......？现在我明白这与 javascript 有关，但我无法真正看出问题出在哪里。我希望你们能帮助我!

非常感谢!

这是我的代码:

<script type="text/javascript">
    $(document).ready(function(){
        $(".boxlink").click(function(){ 
            $(".box").flippy({
                color_target: "red",
                direction: "RIGHT",
                duration: "500",
                noCSS: "true"
            });
        });
    });

    $(".box").flippyReverse();
</script>

<div class="flipboxcontainer">
    <div class="boxcontainer">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
    </div>
</div>

<div class="actionbuttons-btn">
    <div class="boxlink"></div>
    <div class="boxlink"></div>
    <div class="boxlink"></div>
    <div class="boxlink"></div>
</div>

Answer 1

获取单击的boxlink的索引，然后将flippy初始化为该索引中的框

$(document).ready(function () {
    var $boxes = $(".box");
    var $links = $(".boxlink").click(function () {
        var index = $links.index(this);
        $boxes.eq(index).flippy({
            color_target: "red",
            direction: "RIGHT",
            duration: "500",
            noCSS: "true"
        });
    });
});
//you may have to move this to dom ready handler
$(".box").flippyReverse();