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();

Answer 2

虽然在id属性中只使用数值是可以的，但我不推荐它。要确保链接到右侧框，请在所有元素上使用id：

 <div class="flipboxcontainer">
     <div class="boxcontainer">
        <div class="box" id="box_1"></div>
        <div class="box" id="box_2"></div>
        <div class="box" id="box_3"></div>
        <div class="box" id="box_4"></div>
    </div>
</div>

<div class="actionbuttons-btn">
    <div class="boxlink" id="link_1"></div>
    <div class="boxlink" id="link_2"></div>
    <div class="boxlink" id="link_3"></div>
    <div class="boxlink" id="link_4"></div>
 </div>

在点击事件中：

$(document).ready(function(){
    $(".boxlink").click(function(){ 
        var id = $(this).attr('id').substring(5);
        $('#box_'+id).flippy({
            color_target: "red",
            direction: "RIGHT",
            duration: "500",
            noCSS: "true"
        });
    });
});

$(".box").flippyReverse();

Answer 3

在 flippyReverse 功能中，定义与 flippy 相同的css。
只需将颜色更改为“蓝色”

即可

我的.click（）函数有些不对劲

3 个答案: