使用 jquery 單擊時更改 span 元素的文本

Question

這是我的 HTML 代碼：

<div id="trashico">
    <img class="deskico" src="images/trashico.png"/>
    <p><span class="caption">Trash</span></p>
</div>

在這里，我想在單擊div時使用 jQuery 更改span的文本。 那么我應該寫什么 jQuery 呢？

Answer 1

你可以這樣做

$('#trashico').click(function(){
   $(this).find('span').text('your text');
});

Answer 2

您可以在單擊事件上更改span的文本 -

$('#trashico').on('click', function() {
    $(this).find('span').text('new text');
})

小提琴

Answer 3

編寫以下點擊事件

$('#trashico').click(function(){
   $('.caption').text('What ever new name you want');
})

更新答案

至於您嘗試實現的是 Windows F2 功能。 試試下面的邏輯。 您必須使用我給出的基本想法來實現它。

$('#trashico').click(function(){
    $(this).addClass('active'); //Add a seperate class to identify on what is clicked
})

$(document).keyup(function(e){
   if(e.keycode == 113 && $('.active').length > 0){
      $('.caption').text('change name');
   }
})

上面的代碼將向頁面上單擊的圖標添加一個類。 在 Windows 上對選定文件夾進行排序。 然后有一個綁定到文檔的 keyup 事件，它將監聽按下的鍵。 當它達到 113（是 F2 的鍵碼）時，if 條件為真，您將能夠更改名稱。

這是操作系統重命名功能的基本邏輯。 您必須通過此基礎才能達到您的要求。

Answer 4

 $('#trashico').click(function() { $('#trashico > p > span').text("changed text"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trashico"> <img class="deskico" src="images/trashico.png" /> <p><span class="caption">Trash</span> </p> </div>

Answer 5

嘗試以下解決方案。 在這里，我們使用類caption更改span標簽的文本：

$("#trashico").click(function(){
   $(this).find(".caption").text('New Text') }
});