javascript - 使用jsp切换动态创建的html按钮的可见性

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

我是 Web 开发新手...正在使用 jsp 创建一个 html 表。 (对于那些有兴趣的人来说， Spring 内)

<tbody>
<c:forEach var="row" items="${data.rows}">
   <tr>
      <td>  <c:out value="${row.DATA1}" />  </td>
      <td>  <c:out value="${row.DATA2}" />  </td>
      <td class="formClass" title="click to edit...">  
          <form> 
            <input type="text" name="DATA" value="${row.DATA}"> 
            <input type="submit" value="Submit">
          </form> 
      </td>
      <td>  <c:out value="${row.DATA3}" />  </td>

       </tr>
   </c:forEach>
</tbody>    

问题是，我想让提交按钮不可见，直到用户单击文本区域。我不知道会有多少行，因为它来自数据库，所以我不能只为每个提交按钮分配一个 ID。

我该怎么做？如果可能的话，我想在创建单独的 css 或 js 链接到之前将解决方案安装到 .jsp 文件中

Answer 1

您需要做的是将 focus 事件绑定(bind)到所有文本输入元素。在事件函数内 this 将引用触发事件的输入。由于输入是同级输入，因此您可以使用 siblings 选择器来显示该特定文本输入的同级提交按钮。

所以这是代码:

// before using jQuery, you have to wait for the dom to be ready
$(document).ready(function () {

    // bind an focus event to all the text inputs
    $('input[type="text"]').on('focus', function () {

        // inside this function, $(this) is referring to the input that triggered the event
        $(this).siblings('input[type="submit"]').fadeIn();

    });

});

如果您愿意，也可以使用 .show() 代替 .fadeIn()。

记住先用CSS隐藏提交按钮:

input[type="submit"] {
    display: none;
}

或 jQuery:

$('input[type="submit"]').hide();

这是一个演示:http://jsfiddle.net/zmr5ytrk/1/