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

我需要使用剑道界面来显示6-60个项目。每个都在这里使用翻转效果

产品将使用以下唯一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>

---

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

因为每个

div[id^=productfront]

都是

div[id^=productID]

的子项，所以您可以找到该子项并使用它

替换

flip.stop（）.play（）带有

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

在$（'div[id^=productfront]'）中，单击（函数（）{flip.stop（）.play（）；}）；功能？或者在顶部变量el=kendo.fx（$（'div[id^=productID]）、flip=el.flip（“水平”）、$（'div[id^=productfront]、$（'div[id^=productback]）、zoom=el.zoomIn（）.startValue（1）、endValue（1）调用；这两种方法似乎都不起作用，只是伪代码。我本来打算在函数中使用这段代码，但逻辑是您应该使用父选择器的子项来确保正确的项被翻转。我让翻转从前到后工作。不幸的是，当以相同的方式调用kendo.fx（$（this））.flip（“水平“，$（this）.children（）[1]，$（this））时，反向工作不起作用.children（）[0]）.stop（）.reverse（）；我的错误是，我没有将“productID”移动到父位置，这是一个级别。谢谢你的帮助！
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();