1
  1. 我有两个第一次访问时需要隐藏的输入字段。
  2. 将有一个按钮来切换它以显示字段，以便可以对其进行编辑。
  3. 带有 id 的附加词（即 _temp）只是为了更改 id 名称，以便在不需要时不会再次保存。当字段显示附加词 (_temp) 时，需要删除。（即（原始 ID 名称：payment_gateway_login）（附加 ID 名称：payment_gateway_login_temp），当字段显示删除附加 ID 名称时，应返回原始名称：payment_gateway_login，同样应遵循 id="payment_gateway_password"。
  4. 以下是我所能得到的。任何帮助将不胜感激。

HTML：

<ul>
  <li class="show-hide-container hide" style="display: list-item; ">
    <ol>
      <li class="password input required stringish" id="payment_gateway_login_input">
        <input id="payment_gateway_login" name="payment_gateway[login]" type="password">
     </li>
     <li class="password input required stringish" id="payment_gateway_password_input">
       <input id="payment_gateway_password" name="payment_gateway[password]" type="password">
     </li>
   </ol>
 </li>

 <li class="clearfix edit-login-pass"> <a href="#" class="btn" id="show_hide">Edit Login &amp; Password</a>
 </li>
</ul>

​</p>

查询：

$("input#payment_gateway_login").attr("id", "payment_gateway_login" + "_temp");
$("input#payment_gateway_password").attr("id", "payment_gateway_password" + "_temp");

$("#show_hide").live("click", function(event) {
  return $("li.show-hide-container").toggle("show");
});

​</p>

4

1 回答 1

1

你在寻找这样的东西吗？

$('#show_hide').on('click', function(event) {
   if ($('#show-hide-container').is(':visible')) {
      // container is currently visible so hide it and set id to temp
      $('#show-hide-container').hide();
      $('#payment_gateway_login').attr('id', 'payment_gateway_login_temp');
      $('#payment_gateway_password').attr('id', 'payment_gateway_password_temp');
   } else {
      // container is currently hidden so show it and remove temp id
      $('#show-hide-container').show();
      $('#payment_gateway_login_temp').attr('id', 'payment_gateway_login');
      $('#payment_gateway_password_temp').attr('id', 'payment_gateway_password');
   }
});

需要注意的几点： .live() 已被弃用，因此您可能想要使用 .on() 代替。除非您将 html 中的原始 id 更改为包含 _temp，否则这也不起作用。

我不建议一开始就使用这种方法，更改 html id 很容易导致问题。一个更简单的解决方案是在您要保存信息时运行可见检查：

if ($('#show-hide-container').is(':visible')) {
    // Save!
}

希望有帮助！

于 2012-08-14T20:20:13.197 回答