简化这些函数的Javascript语法

时间:2017-10-25 05:23:15

标签: javascript function syntax

简化这些组合功能语法的最佳方法是什么?



var returndateyes = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_7C9F9E2157994A2A84FE73D9389C76AAscope_0");
var returndateno = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_7C9F9E2157994A2A84FE73D9389C76AAscope_1");
var returndatecal = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3C4945224E184A9B9E3B6ABBB6D8A423_scope");
var multitripyes = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3A796ED80E744BDD9720E4ADAC8DCC5Escope_0");
var multitripno = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3A796ED80E744BDD9720E4ADAC8DCC5Escope_1");
var secondtripdate = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FB04828F69244ADB822E8C1CD36477EE_scope");
var thirdtripdate = document.getElementById("content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FDE38F6B8C2E4A788728550A2DECA132_scope");

    returndatecal.style.display = "none";
    secondtripdate.style.display = "none";
    thirdtripdate.style.display = "none";
	  
    returndateyes.onclick = function () {
    if (returndateyes.checked) {
      returndatecal.style.display = "block";
    }
    else {
      returndatecal.style.display = "none";
    }  
  }
	
    returndateno.onclick = function () {
    if (returndateno.checked) {
      returndatecal.style.display = "none";
    }
    else {
      returndatecal.style.display = "block";
    }  
  }

    multitripyes.onclick = function () {
    if (multitripyes.checked) {
      secondtripdate.style.display = "block";
	  thirdtripdate.style.display = "block";	
    }
    else {
      secondtripdate.style.display = "none";
	  thirdtripdate.style.display = "none"
    }  
  }
  
    multitripno.onclick = function () {
    if (multitripno.checked) {
      secondtripdate.style.display = "none";
	  thirdtripdate.style.display = "none";	
    }
    else {
      secondtripdate.style.display = "block";
	  thirdtripdate.style.display = "block"
    }  
  }




它可以工作,但可以使用一些语法建议!

2 个答案:

答案 0 :(得分:0)

<WebMethod()> _
Public Shared Function MasterMenu() As String

    ' Dim dt As New DataTable("MenuMaster")

    Dim dt As New DataTable()
    Dim Query As String = "SELECT ID, MENU_NAME FROM SMT_MENU_MASTER order by menu_name"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(Query)
            Using sda As New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                sda.SelectCommand = cmd
                sda.Fill(dt)
            End Using
        End Using

        Dim sData As String = GetJson(dt)

        Return sData

    End Using

End Function 

 $(document).ready(function () {
          $.ajax({

              type: "POST",
              url: 'Menu.asmx/MasterMenu',
              data: "{}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (data) {
                  console.log(data);
                  alert(data);
              }, error: function (response) {
                  alert("Failed to load data");

              }

          });
      });

答案 1 :(得分:0)

尝试这种方法

  • 根据复选框选中的值

  • 创建所有复选框的地图,其中包含应显示/隐藏的元素
  • 迭代该地图以绑定事件。

以下示例

var checkboxToDateToMap = {
  "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_7C9F9E2157994A2A84FE73D9389C76AAscope_0": ["content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3C4945224E184A9B9E3B6ABBB6D8A423_scope"],
  "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_7C9F9E2157994A2A84FE73D9389C76AAscope_1": ["content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3C4945224E184A9B9E3B6ABBB6D8A423_scope"],
  "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3A796ED80E744BDD9720E4ADAC8DCC5Escope_0": ["content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FB04828F69244ADB822E8C1CD36477EE_scope", "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FDE38F6B8C2E4A788728550A2DECA132_scope"],
  "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_3A796ED80E744BDD9720E4ADAC8DCC5Escope_1": ["content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FB04828F69244ADB822E8C1CD36477EE_scope", "content_1_form_F5E9D36B22E24CA2A7A8E858D4952AEF_field_FDE38F6B8C2E4A788728550A2DECA132_scope"]
}

Object.keys(checkboxToDateToMap).forEach(function(checkboxElementId) {
   
    //first hide all dates
    checkboxToDateToMap[ checkboxElementId ].forEach( function( elementId ) {
        document.getElementById( elementId ).display = "none";
    });

    //get a handle to checkbox
    var checkboxEl = document.getElementById( checkboxElementId );

    //add the event listener to the checkbox
    checkboxEl.addEventListener( "click", function() {
        checkboxToDateToMap[ checkboxElementId ].forEach( function( elementId ) {
            document.getElementById( elementId ).display = checkboxEl.checked ? "block" : "none";
        });
    });
});