如何隐藏或显示输入标签？答案

【问题标题】：How can I hide or show input tag?如何隐藏或显示输入标签？
【发布时间】：2017-11-01 08:17:58
【问题描述】：

当我点击 span 标签时，如何隐藏输入标签或显示它。

我想单击每个跨度标记并显示输入标记并隐藏与该行相关的跨度标记，而其他行仅显示跨度标记。与此行类似的其他行。

$(document).ready(function() {
  var ID, tmp_ID, count, flag = 0;
  $("tr").click(function() {
    ID = $(this).attr('id');
    $("#s" + ID).hide();
    $("#num" + ID).show();
    $("#btn" + ID).show();
  });

  $("btn" + ID).click(function() {
    $("#s" + ID).show();
    $("#num" + v).hide();
    $("#btn" + ID).hide();
  });
});

.num {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tableCompleted">
  <th>Name</th>
  <tbody>
    <tr id="1">
      <td class="noEdit">
        <span id="s1">1</span>
        <div id="btn1" class="num">click me!</div>
        <input type="number" id="num1" class="num" />
      </td>
    </tr>
    <tr id="2">
      <td>
        <span id="s2">2</span>
        <div id="btn2" class="num">click me!</div>
        <input type="number" id="num2" class="num" />
      </td>
    </tr>
    <tr id="3">
      <td>
        <span id="s3">3</span>
        <div id="btn1" class="num">click me!</div>
        <input type="number" id="num3" class="num" />
      </td>
    </tr>
    <tr id="4">
      <td>
        <span id="s4">4</span>
        <div>
          <input id="btn4" class="num" type="submit" value="Release" />
        </div>
        <input type="number" id="num4" class="num" />
      </td>
    </tr>
  </tbody>
</table>

感谢您的回复。

【问题讨论】：

您永远不会触发 $("btn"+ID).click(function() 因为在您加载文档时，ID 为空。这是您的问题
感谢您的重播，有什么解决办法？
你的英文实在是太难懂了，请尝试再解释一下你想要达到的目的。
您可以使用 jquery 切换功能了解更多信息，请参阅answer

标签： javascript jquery html css

【解决方案1】：

你的问题真的很难理解，但我得到的是，你想在点击它的行的 span 元素时隐藏和显示一行输入？

尝试将点击事件绑定到每个跨度，并访问它的父级，然后访问输入以切换它。

$('#tableCompleted span').each(function(){
   $(this).click(function(){
      $('#tableCompleted input').hide();
      $(this).parent().find('input').first().show();
   });
});

此代码将隐藏表格中的所有输入字段，仅显示输入，即单击了相应的 span 标签。

如果您想隐藏该行中的跨度，请使用以下代码：http://jsfiddle.net/hy82ssy2/

【讨论】：

感谢您的重播，当我点击每一行时，该行必须显示输入标签，其他行必须仅显示跨度。
这是我的工作解决方案的分支jsfiddle.net/z816mL78
谢谢，它成功了，我想点击“点击我！”并隐藏所有输入，如何使用？
类似于我发布的点击功能。请注意，Stack Overflow 并不是一个为您编写所有代码的平台。试着理解我的代码是做什么的。请阅读 jQuery 文档。

【解决方案2】：

给每个“btn”一个类，比如“sub-btn”，像这样：

<div id = "btn1" class="num sub-btn">click me!</div>

然后在您的代码中，执行以下操作：

$(".sub-btn").click(function()
    {
        ID = $(this).attr('id').replace(/\D/gi,'');//removes all non-numeric character in id to get number
        $("#s" + ID).show();
        $("#num" + ID).hide();
        $("#btn" + ID).hide();
    });

注意：您的示例中有 2 个带有 btn1 的 id

【讨论】：