Question

首次访问时我需要隐藏两个输入字段。
会有一个按钮来切换它以显示字段，以便进行编辑。
带有id的附加单词（即_temp）只是为了更改id名称，以便在没有必要时不再保存。当字段显示时，需要删除附加单词（_temp）。（即（原始身份识别名称：payment_gateway_login）（附加身份识别名称：payment_gateway_login_temp），当字段显示时删除附加ID名称，以便它应该恢复原始状态：payment_gateway_login，同样应该跟id =“payment_gateway_password”。
以下是我能得到的。任何帮助将不胜感激。

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>

JQUERY：

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

Answer 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!
}

希望有所帮助！

在隐藏ID属性时向其添加一个单词，并在切换到显示时将其删除

1 个答案: