使用下面的代码,我使用 JQuery Flip 插件生成翻转效果。在“verso”属性中,我有一个 ID 为 #ddlBookletType
的选择菜单。该 ID 用于触发另一个创建下拉菜单的 JQuery 插件。
我的 html(位于 verso 属性中)的方式破坏了下拉插件。如果我删除翻转功能,那么我的下拉菜单就可以工作。
问题:
如何确保在仍然使用 Flip 插件的同时,不会破坏在 Flip 插件内使用 ID 为 ddlBookletType
的下拉插件?
代码:
<script type="text/javascript">
function allflip() {
flip();
flip2();
}
function flip2() {
$("#fb_flip").on("click", function (e) {
$(".flip_stuff").flippy({
color_target: "transparent",
direction: "top",
duration: "750",
verso: "<select id='ddlBookletType'>" +
"<option value='<%=(int)Booklet.BookletTypeEnum.EventOne %>'>" +
"<%=Booklet.BookletTypeEnum.EventOne.GetDescription() %></option>" +
"<option value='<%=(int)Booklet.BookletTypeEnum.EventTwo %>'>" +
"<%=Booklet.BookletTypeEnum.EventTwo.GetDescription()%></option>" +
"<option value='<%=(int)Booklet.BookletTypeEnum.EventThree %>'>" +
"<%=Booklet.BookletTypeEnum.EventThree.GetDescription()%></option>" +
"<option value='<%=(int)Booklet.BookletTypeEnum.EventFour %>'>" +
"<%=Booklet.BookletTypeEnum.EventFour.GetDescription()%></option>" +
"<option value='<%=(int)Booklet.BookletTypeEnum.EventFive %>'>" +
"<%=Booklet.BookletTypeEnum.EventFive.GetDescription()%></option>" +
"</select>",
onFinish: function () {
$("#back").on("click", function (e) {
$(".flip_stuff").flippyReverse();
setTimeout(function () {
allflip();
}, 1000);
});
}
});
e.preventDefault();
});
}
$(document).ready(function () { flip2(); });
</script>
<script type="text/javascript">
$("#back").on("click", function (e) {
$(".flip_stuff").flippyReverse();
});
</script>
最佳答案
尝试将代码包装在闭包中。您可能会破坏全局命名空间。
(function () {
var flip = function () {
...
};
}());
关于javascript - 如何在另一个插件中使用 JQuery 插件而不破坏其中一个插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18640291/