如何在Typescript中使用jQuery添加和删除数组字符串?

时间:2017-04-24 14:53:04

标签: javascript jquery typescript

我试图在Typescript中使用jQuery添加和删除数组字符串。

该程序添加了一个包含删除按钮的人,但它不显示姓氏和其他名称输入值,只有一个,第一次按下“插入”按钮时,它不会显示任何值,直到我再次按下按钮。

当我按下"插入"时,如何允许用户输入输入值,然后显示姓氏和其他名称。按钮?

删除某人时,如何实施简单的提示信息?

使用tsc编译时出现错误消息:

Person.ts: error TS2339: Property 'reset' does not exist on type 'HTMLElement'.

所需的输出示例:

Person 1 (values entered above, first press of button)
Surname: Smith (del-btn)
Othername: Matt (del-btn)

Person 2: (values in inputs reset, new values entered)
Surname: Williams (del-btn)
Othername: Robert (del-btn)

我使用的是jQuery,但我很乐意收到一个Typescript替代品。

到目前为止,这是我的代码:

HTML:

<!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript" src="src/Person.js"></script>
        <script type="text/javascript" src="src/jquery-3.2.1.js"></script>
    </head>
    <body> 
        <form id="form1" name="form1">
            <label for="surname">Surname</label>
                <input type="text" name="surname" id="surname" /><br />
            <label for="othername">Other Name</label>
                <input type="text" name="othername" id="othername" /><br />
                <input onclick="newFunction()" id="Button-insert" type="button" value="Insert" />
            <p id="demo"></p>
                <input type="button" id="Button-reset" value="Reset">                   
        </form>
</body>
</html>

Typescript / jQuery:

function newFunction() {

    var all_values =[], demo = $("#demo"), form = $("#form1")[0], surname = $("#surname"), othername = $("#othername");

    $('#Button-insert').click(function(){
    var temp_val = surname.val();
    var temp_va12 = othername.val();
    all_values.push(temp_val);
    all_values.push(temp_val2);

    // create delete button along with the value
    demo.append(
    '<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>',
    '<p>'+temp_val2+' <button value="'+temp_val2+'" type="button" class="del-btn">Delete</button></p>',
    );
    form1.reset();
    });

    $('#Button-reset').click(function(){
    all_values = []; 
    demo.html('');
    });

    demo.on('click', '.del-btn', function(){
    all_values.splice(all_values.indexOf($(this).val()), 1);
    $(this).parent().remove();
    });

}

0 个答案:

没有答案