Question

我有一个HTML / jQuery Mobile项目，我有一个带有“创建按钮”的对话框。当按下“创建按钮”时，我需要它返回上一页（但它无法访问上一页，因为VisualStudio不会让我重定向到与我的对话不在同一文件夹中的页面？）所以真的有两个问题，第一个是如何通过这个按钮点击重定向到上一页。它就像这样工作，你从一个页面开始，然后点击新的配置文件来创建一个新的配置文件，一旦在对话框上单击创建，它需要使用新方法返回到主页面，这将带我到第二个问题。 / p>

该按钮访问两个checkNewUser（）方法;和toggle（）; checkNewUser基本上是表单中的验证，切换是在重定向回原始页面时使一些DIV出现和消失。我的主要问题是如何让提交按钮首先执行checkNewUser方法，如果输入的凭据有效，那么执行切换方法并重定向到我的主页面，我希望这是有道理的，我不会下来投票遗忘： - ）

<a href="C:\Users\A569417\Documents\AppsMaintenance\UI\Privileges.html"  önclick="checkNewUser(); toggle();" data-role="button" data-theme="b"
                data-inline="true" data-mini="true" data-icon="check">Create</a>

这是checkNewUser方法：

function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;

console.log("Attempted login with " + profileName + " and " + companyCode);

if (checkTextboxesValid()) {
}
else {
    console.log("failed")
}

以及它使用的checkTextboxesValid方法：

function checkTextboxesValid() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;

var error_message = "";
// check the fields aren't empty
if (profileName == "") {

    error_message = "You must enter a profile name";
} else {
    $("#profilename").removeClass("ui-body-f").addClass("ui-body-a");
}

if (companyCode == "" || companyCode == "Company") {

    error_message = "You must select a company code";
} else {

}


if (error_message != "") {
    $("#message_table").removeClass("hide_element");
    $("#login_status_message").html(error_message);
    return false;
} else {
    return true;
}

然后最后这是隐藏div的Toggled方法。我不确定如何让提交按钮使用这两种方法，并且只有在验证合适的情况下，切换方法才有效。我猜我必须将两种方法结合起来，或者可能有更简单的方法？

var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),

toggle = function () {
   if( toggled ) {
       div1.style.display = "block";
       div2.style.display = "none";
       div3.style.display = "block";
       div4.style.display = "none";
   } else {
       div1.style.display = "none";
       div2.style.display = "block";
       div3.style.display = "none";
       div4.style.display = "block";
   }
   toggled = !toggled;
  };

尝试使用发布的一个答案，但是那个没有用，div在那个方法中没有受到影响但是我不知道为什么不这样做，有人帮助我吗？

Answer 1

由于你已经标记了jquery，我会考虑将getElementById更改为$（＆＃34;＃.. 但是（将您的切换嵌入支票内）：

function checkNewUser() {
   var profileName = document.getElementById("profilename").value;
   var companyCode = document.getElementById("companycode").value;

   console.log("Attempted login with " + profileName + " and " + companyCode);

   if (checkTextboxesValid()) {
      var toggled = false,
      div1 = document.getElementById("OldProfile"),
      div2 = document.getElementById("NewProfile"),
      div3 = document.getElementById("OldProfileButtons"),
      div4 = document.getElementById("NewProfileButtons"),

      toggle = function () {
         if( toggled ) {
             div1.style.display = "block";
             div2.style.display = "none";
             div3.style.display = "block";
             div4.style.display = "none";
         } else {
             div1.style.display = "none";
             div2.style.display = "block";
             div3.style.display = "none";
             div4.style.display = "block";
         }
         toggled = !toggled;
        };
   }
   else {
       console.log("failed")
   }

很高兴我可以帮忙。我认为你应该使用这个重构代码：

function checkNewUser() {
   var profileName = $("#profilename").value;
   var companyCode = $("#companycode").value;

   console.log("Attempted login with " + profileName + " and " + companyCode);

   if (checkTextboxesValid()) {
      var toggled = false,
      div1 = $("#OldProfile"),
      div2 = $("#NewProfile"),
      div3 = $("#OldProfileButtons"),
      div4 = $("#NewProfileButtons"),

      toggle = function () {
         if( toggled ) {
             $(div1).css('display','block');
             $(div2).css('display','none');
             $(div3).css('display','block');
             $(div4).css('display','none');
         } else {
             $(div1).css('display','none');
             $(div2).css('display','block');
             $(div3).css('display','none');
             $(div4).css('display','block');
         }
         toggled = !toggled;
        };
   }
   else {
       console.log("failed")
   }

提交按钮同时使用两种方法，而不是一种，我该如何解决这个问题？

1 个答案: