Javascript jQuery UI选项卡-将参数设置为下一次/上一次按钮单击

我目前正在使用jQueryUI选项卡和ajax。我总共有3个选项卡，只能通过“下一步”和“上一步”按钮进行导航。我已经设置了参数：在tab1中，如果您离开输入字段

car\u name

，您将收到一条警报消息和tab2中的类似参数

我的预期设置：如果不满足参数，则用户无法前进到下一个选项卡。然而，这一部分不起作用。用户收到一个警报：他们可以忽略该警报，再次单击“下一步”，然后进入下一个选项卡。在完成参数（填写输入字段）之前，我如何禁用“下一步”按钮

多谢各位

JS

    <script>  
        $(function () {
            var $tabs = $('#tabs').tabs({
              disabled: [0, 1, 2],
              select: function () {

                $.ajax({
                  type: "POST",
                  url: "post_tabs.php",
                  data: {
                    "name": $("#car_name").val(),
                    "title": $("#title").val(),
                    "price": $("#price").val()

                  },
                  success: function (result) {
                    $("#tab-3").html(result);
                  } 
                });  
              } 
            });

            $(".ui-tabs-panel").each(function (i) {
              var totalSize = $(".ui-tabs-panel").size() - 1;
              if (i != totalSize) {
                next = i + 2;
                $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
              }
              if (i != 0) {
                prev = i;
                $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
              }
            });



            $('.next-tab, .prev-tab').click(function () {
              var prev = $(this).hasClass('prev-tab');
              var currentTab = $('#tabs').tabs('option', 'selected');
              if (
                prev || /*(A)*/ (
                  currentTab == 0 && /*(B)*/
                  $.trim($('#car_name').val()).length > 0

                ) || (
                  currentTab == 1 && /*(C)*/
                  $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0)


              ) {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } else if (!prev) {
                switch (currentTab) {
                  case 0:
                    alert('Please choose an option.', 'Alert Dialog');
                    break;
                  case 1:
                    alert('Please fill out all the required fields.', 'Alert Dialog');
                    break;

                }
              }
              return false;
            });


     $('.next-tab, .prev-tab').click(function () {
          var tabIndex = $(this).attr("rel");
          $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
          return false;
      });
});
         </script>

$（函数（）{
变量$tabs=$（'#tabs'）。tabs({
已禁用：[0,1,2]，
选择：函数（）{
$.ajax({
类型：“POST”，
url:“post_tabs.php”，
数据：{
“名称”：$（“#汽车名称”）.val（），
“标题”：$（“#标题”）.val（），
“价格”：（“#价格”）.val（）
},
成功：功能（结果）{
$（“#表3”）.html（结果）；
} 
});  
} 
});
$（“.ui选项卡面板”）。每个（功能（i）{
var totalSize=$（“.ui选项卡面板”）.size（）-1；
如果（i！=总尺寸）{
next=i+2；
$（此）。追加（“”）；
}
如果（i！=0）{
prev=i；
$（此）。追加（“”）；
}
});
$（'.next tab，.prev tab'）。单击（函数（）{
var prev=$（this）.hasClass（'prev-tab'）；
var currentTab=$（'#tabs'）。tabs（'option'，'selected'）；
如果(
上一届| |/*（A）*/(
currentTab==0&/*（B）*/
$.trim（$（'#汽车名称'）.val（））.length>0
) || (
currentTab==1&/*（C）*/
$.trim（$（'#title'）.val（））.length>0&$.trim（$（'#price'）.val（））.length>0）
) {
var tabIndex=$（this.attr（“rel”）；
$tabs.tabs（'enable'，tabIndex.）.tabs（'select'，tabIndex.）.tabs（'option'，'disabled'，[0,1,2,3,4]）；
}如果（！上一个）{
开关（当前选项卡）{
案例0：
警报（'请选择一个选项'，'警报对话框'）；
打破
案例1：
警报（'请填写所有必填字段'，'警报对话框'）；
打破
}
}
返回false；
});
$（'.next tab，.prev tab'）。单击（函数（）{
var tabIndex=$（this.attr（“rel”）；
$tabs.tabs（'enable'，tabIndex.）.tabs（'select'，tabIndex.）.tabs（'option'，'disabled'，[0,1,2,3,4]）；
返回false；
});
});

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
 <label for="car_name">Car Model</label>
     <input type="text" id="car_name" class="detail" name="car_name" value="" /> <br>

</div>

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">

     <label for="title">Title</label>
     <input type="text" id="title" name="title" size="60" autocomplete="off" value=""/><br>
     <label for="price">Price</label>
     <input type="text" id="price" name="price" size="60" autocomplete="off" value=""/><br>
</div>

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">

</div>

汽车模型


标题


价格

您的代码有点奇怪。你注册“下一个”和“上一个”两次

那不是你想要的

您需要的是以下行为：

如果单击了“上一步”-始终转到“上一步”

如果单击“下一步”-仅当满足必填字段时才转到“下一步” 这意味着您应该更改以下内容

从第一个事件中删除

.prev选项卡

选择器-并删除对

prev

vairable的任何提及。此方法应仅处理

next

从第二个事件绑定中删除

next

，此绑定应仅处理

prev

因此，您的JavaScript将如下所示：

   $('.next-tab').click(function () {

              var currentTab = $('#tabs').tabs('option', 'selected');
              if (
                (
                  currentTab == 0 && /*(B)*/
                  $.trim($('#car_name').val()).length > 0

                ) || (
                  currentTab == 1 && /*(C)*/
                  $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0
                )


              ) {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } else {
                switch (currentTab) {
                  case 0:
                    alert('Please choose an option.', 'Alert Dialog');
                    break;
                  case 1:
                    alert('Please fill out all the required fields.', 'Alert Dialog');
                    break;

                }
              }
              console.log("preventing default");

              return false;
            });


     $('.prev-tab').click(function () {
          var tabIndex = $(this).attr("rel");
          $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
          return false;
      });

这应该可以解决你的问题

您可以在actions中看到这一点，并在

以上将回答您的问题

现在，请允许我为“下一个”场景提供一个缩短代码的方法

在

$（'.next tab'）行的正上方。单击（function（）{

创建以下函数

function isEmpty( item ) { 
    return $.trim(item.val()).length <= 0;
}

现在，JS代码应该更小，更易于维护（即使您添加了另一个带有必填字段的选项卡-它不应该更改）-就在这里

$('.next-tab').click(function () {
              var $tab = $(this).closest(".ui-tabs-panel");
              var $requiredFields = $tab.find(".required");
              var canContinue = true;

              $requiredFields.each(function(index,item){
                console.log(["checking" , item]);
                if ( canContinue && isEmpty($(item))){ alert( $tab.attr("data-alert"), 'Alert Dialog' ); canContinue = false; }

              });
              if ( canContinue )
              {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } 
              return false;
            });

---

谢谢！我已经注册了“下一个”和“上一个”两次。很好！我添加了一些关于如何使代码更易于阅读/维护的反馈。非常高兴。非常好！这是一种更好的方法。做得很好，我的朋友！我还有一个请求，请检查问题：

$('.next-tab').click(function () {
              var $tab = $(this).closest(".ui-tabs-panel");
              var $requiredFields = $tab.find(".required");
              var canContinue = true;

              $requiredFields.each(function(index,item){
                console.log(["checking" , item]);
                if ( canContinue && isEmpty($(item))){ alert( $tab.attr("data-alert"), 'Alert Dialog' ); canContinue = false; }

              });
              if ( canContinue )
              {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } 
              return false;
            });