Question

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

我的页面上有4个小DIVS，div1-div4有不同的IDS。在页面的顶部，我有一个INPUT，用户可以在其中写入想要使用不同功能的DIV用户的名字。在第一次输入之后，还有另一个输入，用户可以在其中写入一个文本，该文本将被打印到DIV中，该文本在第一个输入中通过＆＃34;添加文本＆＃34;按钮。

之后我有4个不同的按钮，分别是Fade Out，Fade In，Slide Up，Slide Down。

这些功能仅适用于用户在第一个框中写入的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

2 个答案: