对同一页面上的多个项目使用 Kendo UI 翻转效果/组合效果

Question

我需要使用 kendo ui 来显示 6-60 个项目。这里每个都使用翻转效果http://demos.telerik.com/kendo-ui/fx/combined

将从数据库中加载具有唯一 ID 的产品，如下所示：

<div class="row">
<div class="col-md-4 product-container">
    <div id="productID1" class="productID">
        <div class="product">
            <div id="product-back1" class="product-desc">
                <p>BACK</p>
            </div>
            <div id="product-front1" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 product-container">
    <div id="productID2" class="productID">
        <div class="product">
            <div id="product-back2" class="product-desc">
                <p>BACK</p>
            </div>

            <div id="product-front2" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 product-container">
    <div id="productID3" class="productID">
        <div class="product">
            <div id="product-back3" class="product-desc">
                <p>BACK</p>
            </div>
            <div id="product-front3" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>

问题是我需要在页面上设置多个面板，我怎样才能让每个 "front" 和 "back" 点击都是唯一的。

   var el = kendo.fx($('div[id^=productID]')),
    flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
    zoom = el.zoomIn().startValue(1).endValue(1);

flip.add(zoom).duration(200);

$('div[id^=product-front]').click(function () {
    flip.stop().play();
});

$('div[id^=product-back]').click(function () {
    flip.stop().reverse();
});

我试过将每个项目加载到数组中，但没有找到确保翻转正确项目的好方法。

Answer 1

因为每个 div[id^=product-front] 都是 div[id^=productID] 的 child，你可以找到它的 children 并使用它。

将flip.stop().play();替换为

kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();

对同一页面上的多个项目使用 Kendo UI 翻转效果/组合效果

Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page

javascript

jquery

kendo-ui