Question

我的页面上有一些复选框。通过jQuery更改功能，如果选中复选框，我将附加div。如果未选中复选框，请删除该div。如果点击速度慢，它可以正常工作。每当多次点击尝试以快速速度发生时，它就不会删除div。它会多次追加div。有人可以帮我解决这个问题吗？以下是我的尝试。

<script type="text/javascript">
$('#include_addon_checkbox_<?PHP echo $addon_ids; ?>').change(function(){
if($(this).is(':checked')){

    var summary_div = '<div class="sidebar_addon" id="sidebar_addon_<?PHP echo $addon_ids ?>"><div class="addon-content"><?PHP echo str_replace("_", " ", $addons_keys) ?><p><?PHP echo $addon_package_name; ?> <a href="javascript:;" data-toggle="modal" data-target="#myModal_<?PHP echo $addon_ids; ?>"><span>(more details)</span></a></p></div><div class="addon-price">$ <?PHP echo $addon_package_price; ?></span></div>';

    $('#addons_container').append(summary_div);
    $('#sidebar_addon_<?PHP echo $addon_ids ?>').hide().slideDown(750);
}
else {
    $('#sidebar_addon_<?PHP echo $addon_ids ?>').slideUp(750, function(){ $(this).remove(); });
}
});
</script>

Answer 1

也许是php变量的问题。你可以试试这个：

float left

在加载页面之前，将php变量分配给js变量。然后jquery加载它。

Answer 2

我认为这是关于你的动画时间。您可以将动画时间设置为200-300毫秒。或者禁用所有复选框，直到动画结束。然后启用它们。

如果快速多次点击，jQuery删除属性将无法运行

2 个答案: