jquery - 我的.click()函数不正确

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

在此链接here中，您可以看到每个绿色按钮应该如何为每个蓝色框调用Flippy事件。问题是，当我单击任何绿色框时，都会调用Flippy插件，并且所有蓝色框都会立即受到影响，这绝对不是我想要的。如何使绿色的方框1呼叫蓝色的方框等等...？现在，我了解到这与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>

最佳答案

获取单击的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();

关于jquery - 我的.click()函数不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20568090/