0

我正在创建一个带有表单的 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/

任何帮助将不胜感激

4

1 回答 1

0

I have changed your code a little bit to do things more efficiently.

First, I used event delegation, which means there is no need to add any more listeners during execution. The event propagates until it reaches the form and then the clicked button is identified and the event is handled.

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

I then get the selected animation and index and from there you can do whatever you want.

The form is separated from the rest of the page elements, and there is only one form, not one form per sprite.

On a side note, if I were to do it myself, I would separate the logical representation of the 'back-end' (i.e, the code that drives the animator) from the UI accompanying it by creating an Animator class that can be instantiated and creates the entire interface from scratch and is reusable and self-contained.

See the example here.

于 2013-07-21T19:06:25.393 回答