jQuery替換文本時點擊不同的輸入文字對象

我試圖實現的是每次按「Title」或「Description」時，只會顯示當前的文本區域消息。

我試圖克隆原來的div，但我真的不知道在哪裏或如何使用它，所以這個替換文本的想法似乎更容易實現。

正如我所說，我是網絡編程的新手，我真的很受歡迎。我不明白爲什麼下面的代碼不工作：

<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, '')); 
});

來源

2013-08-27 Pirvu Mihai-Cristian

你的jsfiddle有錯別字。編輯小提琴可以找到[這裏]（http://jsfiddle.net/MceE9/2/）這是你想要的那種行爲？ – achakravarty

@achakravarty'.one（）'可能不是一個錯字，因爲它是一個合法的函數。不過，你應該是'.on（）'。如果您不斷點擊相同的輸入框，您的小提琴也會產生重複的字符串。 – Jimmery

哦對不起我的壞:(謝謝指出，更新它[這裏]（http://jsfiddle.net/G96YH/） – achakravarty

你的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>'); 
});

來源

2013-08-27 15:55:36 Jimmery

你可以做這樣的事情：

var text = {}; 

text['title'] = '<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>'; 
text['description'] = '<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>'; 

$('input, textarea').on('focus', function() { 
    $('#text').remove(); 
    $(this).parent().append(text[this.name]); 
});

http://jsfiddle.net/dpatz/MceE9/4/

來源

2013-08-27 16:01:12

你和Jimmery的工作都很好，謝謝你。 –

或者類似的東西，這可能工作：

http://jsfiddle.net/MceE9/5/

var title; 
var description; 

$('#titleClick').on('click', function(event){ 
    event.stopPropagation(); 
    var textToDisplay = 'this is an error message'; 
    var $errorElement = $('span.title-text'); 

    $errorElement.text(textToDisplay); 

    $('body').one('click', function() { 
     $errorElement.text(''); 
    }); 

}); 

$('#descriptionClick').on('click', function(){ 
    // repeat for second element - or make a more generic function that works for both. 
});

來源

2013-08-27 16:09:10

jQuery替換文本時點擊不同的輸入文字對象

回答

相關問題