將多個屬性更改應用到一個元素

我正在使用JQuery對一個按鈕HTML元素進行以下更改。必須有更好的寫作方式？將多個屬性更改應用到一個元素

  $("#showHide").click(function() { 
      if ($("#form_password").attr("type") == "password") { 
       $("#form_password").prop('type', 'text'); 
       $("#showHide").html('Hide'); 
       $("#showHide").removeClass("toggle-hide"); 
       $("#showHide").addClass("toggle-show"); 
       $('#showHide').prop('title', 'Hide Password'); 
       $('#showHide').attr("aria-label","Hide Password"); 
       $('#showHide').attr("aria-pressed","true"); 

      } else { 
       $("#form_password").prop('type', 'password'); 
       $("#showHide").html('Show'); 
       $("#showHide").removeClass("toggle-show"); 
       $("#showHide").addClass("toggle-hide"); 
       $('#showHide').prop('title', 'Show Password'); 
       $('#showHide').attr("aria-label","Show Password"); 
       $('#showHide').attr("aria-pressed","false"); 

      } 
     });

來源

2016-09-10 AmbrosiaP

試試這個：

$(document).ready(function(){ 

    $("#showHide").on("click",function(){ 

     if ($("#form_password").attr("type") == "password") { 

      $("#form_password").attr('type', 'text'); 
      $(this).attr({title:"Hide Password","arria-label":"Hide Password","aria-pressed":"true"}); 
      $(this).toggleClass("toggle-hide toggle-show").html("hide"); 
     } 

     else { 

      $("#form_password").attr('type', 'password'); 
      $(this).attr({title:"Show Password","arria-label":"Show Password","aria-pressed":"false"}); 
      $(this).toggleClass("toggle-hide toggle-show").html("Show"); 

     } 

    }) 
})

最終代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <style> 
 
     
 
    </style> 
 
</head> 
 
    <body> 
 
     <input type="password" id="form_password" value="root"><button id="showHide">Show</button> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
    $(document).ready(function(){ 
 

 
     $("#showHide").on("click",function(){ 
 
      if ($("#form_password").attr("type") == "password") { 
 
       $("#form_password").attr('type', 'text'); 
 
       $(this).attr({title:"Hide Password","arria-label":"Hide Password","aria-pressed":"true"}); 
 
       $(this).toggleClass("toggle-hide toggle-show").html("hide"); 
 
      } 
 

 
      else { 
 
       $("#form_password").attr('type', 'password'); 
 
       $(this).attr({title:"Show Password","arria-label":"Show Password","aria-pressed":"false"}); 
 
       $(this).toggleClass("toggle-hide toggle-show").html("Show"); 
 

 
      } 
 

 
     }) 
 

 
    }) 
 
     
 
     </script> 
 
    </body> 
 
</html>

來源

2016-09-10 11:05:26 Ehsan

你可以先拿到項目，然後分配屬性：

$("#showHide").click(function() { 
     var form_password = $("#form_password"); 
     var showHide = $("#showHide"); 
     if (form_password.attr("type") == "password") { 
      form_password.prop('type', 'text'); 
      showHide.html('Hide'); 
      showHide.removeClass("toggle-hide"); 
      showHide.addClass("toggle-show"); 
      ...

來源

2016-09-10 10:40:04 xmas79

我用上述答案的組合，它的工作原理和看起來清爽多了 - 感謝

var form_password = $("#form_password"); 
    var showHide = $("#showHide"); 

    showHide.click(function() { 
     if (form_password.attr("type") == "password") { 
      form_password.prop('type', 'text'); 
      showHide.attr({title:"Hide Password","aria-label":"Hide Password","aria-pressed":"true"}); 
      showHide.toggleClass("toggle-hide toggle-show").html("Hide"); 
     } else { 
      form_password.prop('type', 'password'); 
      showHide.attr({title:"Show Password","aria-label":"Show Password","aria-pressed":"false"}); 
      showHide.toggleClass("toggle-hide toggle-show").html("Show"); 
     } 
    }); 
}

來源

2016-09-10 11:23:11 AmbrosiaP

將多個屬性更改應用到一個元素

回答

相關問題