添加一個單詞到ID屬性，當它被隱藏並刪除它時切換顯示

Question

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> 

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（）不推薦使用，所以你可能要改爲使用。對（）。除非您將html中的原始ID更改爲包含_temp，否則這也不起作用。

我不會推薦這種方法，但是，更改html id很容易導致問題。更簡單的解決方案是在您要保存信息時運行可見檢查：

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

希望有所幫助！