使用jquery单击时更改span元素的文本答案

【问题标题】：Change text of span element when clicking on it using jquery使用jquery单击时更改span元素的文本
【发布时间】：2015-10-18 22:18:19
【问题描述】：

这是我的 HTML 代码：

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

这里我想在点击div时使用jQuery来更改span的文本。那么我应该写什么jQuery呢？

【问题讨论】：

如果你想要它在 jQuery 中为什么标记为 php？
您要重命名名称还是文本？
你试过了吗？
你需要编写一个点击事件处理程序来改变span的内容
我认为使字段内容可编辑将是 OP 想要的。然后可以将其 ajaxed 到服务器

标签： javascript jquery html

【解决方案1】：

编写下面的点击事件

$('#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 条件为真，您将能够更改名称。

这是操作系统重命名功能的基本逻辑。你必须通过这个基地才能达到你的要求。

【讨论】：

为什么在不纠正错误的情况下投反对票。这个答案没有错！请解释为什么答案被否决！
为什么这个答案被否决了？此代码有效。一个糟糕问题的答案不应该仅仅因为存在而被否决。
我认为有人出于某种愚蠢的原因拒绝投票所有答案。我会回答所有正确的答案。
大部分反对票都是在编辑之前完成的。恢复了我的反对票。
是的，应该。在编辑之前，它只有click 事件，但没有更改文本的方式。希望你能理解。 :)

【解决方案2】：

你可以这样做

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

【讨论】：

为什么这个答案被否决了？此代码有效。一个糟糕问题的答案不应该仅仅因为存在而被否决。

【解决方案3】：

您可以在点击事件上更改span 的文本 -

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

Fiddle

【讨论】：

为什么这个答案被否决了？此代码有效。一个糟糕问题的答案不应该仅仅因为存在而被否决。
@RoryMcCrossan 我也在想同样的事情。 :)
想要创建我们在计算机中使用的功能。单击文件夹并按 f2 键，我们重命名该文件夹。我必须创建此功能。那我该怎么办？
@Nisarg 你想要像OSs 这样的重命名工具吗？
要更改网页或目录将需要服务器端语言。 Javascript 是客户端。

【解决方案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>

【讨论】：

【解决方案5】：

尝试以下解决方案。这里我们将span标签的文本改成caption类：

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

【讨论】：