Question

$(function() {
$("input").hide();
$("li").on("click",function (){
    $(this).hide(500);
    var inp = $(this).find("input");
    $(inp).show(500)
    })
});

我希望它只显示输入字段而不显示span标记中的文本

<!DOCTYPE html>
<html>
<head>
    <title>Bookmarks</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
    <h1>Bookmarks</h1>
    <h2>click on the items below to edit</h2>
    <ul id="list">
    <li> <span>apple</span> <input value="apple"> </li>
    <li> <span>banana</span> <input value="banana"> 
</li>
    <li> <span>orange</span> <input value="orange"> </li>
    </ul>
</body>
</html>

这是我在本网站上的第一篇文章，对于我犯的任何错误都很抱歉。我试图制作书签系统

Answer 1

点击句柄中的

this指的是<li>节点，因此当您在其上调用.hide()时，所有子节点也会被隐藏。您应该定位span内的li元素。

$(function() {
  $("input").hide();
  $("li").on("click", function() {
    $('span', this).hide(500);
    $('input', this).show(500);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Bookmarks</h1>
<h2>click on the items below to edit</h2>
<ul id="list">
  <li> <span>apple</span>
    <input value="apple"> </li>
  <li> <span>banana</span>
    <input value="banana">
  </li>
  <li> <span>orange</span>
    <input value="orange"> </li>
</ul>

Answer 2

你想要这个吗？ See this fiddle

$("input").hide();
$("li").on("click",function (){
    $(this).find('span').hide(500);
    var inp = $(this).find("input");
    $(inp).show(500);
});

Answer 3

如果您只能显示一个文本字段，请尝试使用此代码

<input type="text" name="" value="hello">
<ul>
 <li>test</li>
</ul>

你的.js文件在这里扩展

<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").hide();
$("li").on("click",function (){
    $(this).hide(500);
    $('input').show(500)
    })
});   
</script>

如果您可以点击li li，则会隐藏并使用input关键字文字字段显示

如何在此代码中显示输入标记？

3 个答案: