将输入值打印到不同的 DIVS- jQuery

Question

我目前正在做一个小项目，因为我是 jQuery 的新手。

我的页面上有 4 个小 DIVS，其 IDS 与 div1-div4 不同。在页面顶部，我有一个 INPUT，用户可以在其中写入 DIV 用户的名称，以使用不同的功能。在第一个输入之后，还有另一个输入，用户可以在其中写入文本，该文本将打印到 DIV 中，在 "Add Text" 按钮的帮助下在第一个输入中选择。

之后我有 4 个不同的按钮，分别是淡出、淡入、向上滑动、向下滑动。

这些功能仅对用户在第一个框中填写的 div ID 有效。

这是我的一个函数的 JQuery 示例：

$("#fadeOutBtn").click(function(){

selectedDiv = $('#divChooseTxt').val();
$("#"+selectedDiv).fadeOut(1500, "swing", function(){

        });
    });

我现在需要帮助的是了解如何从用户那里获取文本并将其打印到选定的 DIV。

这是此函数的 HTML：

<label>Text: 
<input id="divTxt" type="text">
</label>
<input id="addTextBtn" type="button" value="Add Text">

你能帮帮我吗？

Answer 1

http://fiddle.jshell.net/yc4ahsno/

使用 val() 获取文本：

test = $('#divTxt').val();

将文本插入 div:

document.getElementById('thisdiv').innerHTML = test;

Answer 2

给你。下一步也是在 switch 语句中使用该函数。

JSFiddle

$('#submit').click(function () {
    var name = $('#name').val();
    var content = $('#content').val();
    $('#results').html(name);
    functions(name,content);
});
function functions(name,content){
    switch(name){
        case 'a':
            $('#div_one').css('background-color','red');
            $('#div_one').html(content);
            break;
            case 'b':
            $('#div_two').css('background-color','red');
            $('#div_two').html(content);
            break;
            case 'c':
            $('#div_three').css('background-color','red');
            $('#div_three').html(content);
            break;
            case 'd':
            $('#div_four').css('background-color','red');
            $('#div_four').html(content);
            break;

    }
}

switch 语句接受输入并匹配正确的功能。

将输入值打印到不同的 DIVS- jQuery

Print input value to different DIVS- jQuery

html

css

jquery

input