javascript - 单击不同的输入文本对象时 jQuery 替换文本

Question

我是 JS/jQuery 的新手。

我试图实现的是，每次我按下“Title”或“Description”时，应该只显示当前的文本区域消息。

我试图克隆原始的div，但我真的不知道在哪里或如何使用它，所以这个替换文本的想法似乎更容易实现。

正如我所说，我是网络编程的新手，而且我真的一头雾水。我不明白为什么以下代码不起作用:

http://jsfiddle.net/MceE9/

<div class="content"> 
<form method="POST" id="anunt">
    <table id="anunt">
        <tr id="title">
            <td> Title: </td>
            <td> <input type='text' name='title' id='titleClick'> </td>
        </tr>
         <tr id="description">
            <td> Description: </td>
            <td> <textarea rows="5" cols="40" id="descriptionClick" name="description"></textarea> </td>
        </tr>
        <tr>
        <td> <input type="submit" name="send" value="Send"> </td>
        </tr>
    </table>
</form>

var title;
var description;

$('#titleClick').one('click', function(){
        title = '<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>';
       $("#title").append(title);
       $('#description').html($('#description').html().replace(description, ''));
    });

$('#descriptionClick').one('click', function(){
        description = '<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>';
        $("#description").append(description);
        $('#title').html($('#title').html().replace(title, ''));
});

Answer 1

将您的 javascript 更改为如下内容:

$('#titleClick').on('focus', function(){
    $('#text').remove();
    $("#title").append('<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>');
});

$('#descriptionClick').on('focus', function(){
    $('#text').remove();
    $("#description").append('<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>');
});