Question

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

我想点击每个span标记并显示输入标记并隐藏与该行相关的span标记，而其他行仅显示span标记。像这一行的其他行。

＆＃13;

$(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();
  });
});

＆＃13;

.num {
  display: none;
}

＆＃13;

<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>

＆＃13;

感谢您的回复。

Answer 1

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

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

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

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

如果要隐藏该行中的范围，请使用以下代码：http://jsfiddle.net/hy82ssy2/

Answer 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个ID与btn1

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

2 个答案: