Question

我正在创建一个带有表单的GUI，用于将对象插入到div中，然后将类应用于它，以便在屏幕上为其设置动画。然而，按照我设置的方式，每当我选择类并应用它并点击提交按钮时，它似乎刷新了整个页面。我知道它与使用POST方法有关但我不确定如何。这是我的JS：

////////////////////////////////////////////////////////////////////////////////////////////////////////ADD A SPRITE
var spriteId = 1;
$(".add_sprite").click(function() {
    $("<div />", { "class":"sprite_container", id:"sprite_container"+spriteId })
    .append($("<div />", { "class":"sprite" , id:"sprite"+spriteId }))
    .appendTo("#divMain");
    spriteId++;
});

////////////////////////////////////////////////////////////////////////////////////////////////////////ADD SPRITE CONTROLS
var controlsId = 1;
$(".add_sprite").click(function() {
    $("<form />", { "class":"sprite_controls", id:"sprite_controls"+controlsId })

    //Sprite Name
    .append($("<input />", {"class":"sprite_name", type: "text", value: "Name It", id:"name"+controlsId }))

    //Sprite Animation A
    .append($("<select/>", { "class":"sprite_animationA", id:"animationA"+controlsId })
        .append($("<option />", { value:"Animate It"})
            .append("Animate It")
        )
        .append($("<option />", { value:"Pulse"})
            .append("Pulse")
        )
        .append($("<option />", { value:"Star"})
            .append("Star")
        )
        .append($("<option />", { value:"Square"})
            .append("Square")
        )
    )
    .append($("<button/>", { "class":"run_it", id:"run_it"+controlsId })
        .append("Run It")   
    )
    .appendTo("#controls");
    controlsId++;
});

////////////////////////////////////////////////////////////////////////////////////////////////////////APPLY ANIMATIONS TO SPRITE 1

//$('#sprite_controls1').submit(applyAnimA1);
//$('#run_it1').off().click(function() {$('#sprite_controls1').submit();});
//  function applyAnimA1() {
$('#run_it1').click(function (e) {
        var animA1 = $('#animationA1');
        e.preventDefault();
        if (animA1.val() == 'Pulse'){

            $("#sprite_container1").addClass("pulse");


        }
        else if (animA1.val() == 'Star'){

            $("#sprite_container1").addClass("star");

        }
        else if (animA1.val() == 'Square'){

            $("#sprite_container1").addClass("square");


        }

        else{
        }
    //}
    });

这是一个JS小提琴：http://jsfiddle.net/2vazw/

非常感谢任何帮助

Answer 1

我已经更改了你的代码以更有效地做事。

首先，我使用了事件委托，这意味着在执行期间不需要再添加任何侦听器。事件传播直到它到达表单，然后识别单击的按钮并处理事件。

$('#formContainer').delegate('button','click',function (e) {
...

然后我获得所选的动画和索引，然后从那里你可以做任何你想做的事。

表单与其他页面元素分开，每个sprite只有一个表单，而不是一个表单。

另一方面，如果我自己这样做，我会通过创建一个Animator类来分离“后端”的逻辑表示（即驱动动画师的代码）与伴随它的UI。可以实例化并从头开始创建整个界面，并且可以重复使用和自包含。

请参阅示例here。

将POST方法集成到动态创建的表单中

1 个答案: