除非条件通过，否则如何阻止 Bootstrap Tour 进入下一步答案

【问题标题】：How to stop Bootstrap Tour from moving onto next step unless conditions pass除非条件通过，否则如何阻止 Bootstrap Tour 进入下一步
【发布时间】：2017-06-29 17:31:23
【问题描述】：

我有 3 个 div，前两个是可见的，然后第三个是隐藏的，在前 2 个中的每一个中都有一个按钮，当你按下它时隐藏 div，当两个都隐藏时，第三个变得可见。问题是如果 div1 或 div2 可见，我如何“禁用”下一个按钮。

我曾尝试使用 onHide、onShow，但它要么不起作用，要么陷入无限循环。

添加此功能的正确方法是什么。

编辑： HTML

    <div id="myDiv1">
    <button id="b1" onclick="$('#myDiv1').hide(); testForHidden()">Button1</button>
    <div id="myDiv1">
    <button id="b2" onclick="$('#myDiv2').hide(); testForHidden()">Button2</button>
    <div id="myDiv3" style="display:none">
    <button id="b3" onclick="$('#myDiv3').hide();">Button3</button>

var tour = new Tour({
  storage : false,
  steps: [],
  backdrop : false
});

tour.addSteps([
  {
    element: "#myDiv1", // string (jQuery selector) - html element next to which the step popover should be shown
    title: "Title1", // string - title of the popover
    content: "content 1", // string - content of the popover
    placement : "bottom"
    },
  {
    element: "#myDiv2",
    title: "Title 2",
    content: "content 2",
    placement : "bottom",
  //  Trying to make it freeze on second tour step if the elements are not hidden, since the step 3 belongs to element that only becomes visible when the previous 2 are hidden

  },
  {
    element: "#myDiv3",
    title: "Title 3",
    content: "content 3",
    backdrop: true,
    placement : "bottom"
  },
// Initialize the tour
 tour.init();

 // Start the tour
 tour.start();

function testForHidden(){
 if(document.getElementById("myDiv1").style.display == "none" && document.getElementById("myDiv2").style.display == "none"){
$("#myDiv3").show();
}
}

【问题讨论】：

如果您发布代码的代码 sn-p 会很棒:)
@JVLobo 我已经添加了一些代码，希望对您有帮助
您说“问题是如果 div1 或 div2 可见，我如何‘禁用’下一个按钮。”。哪个按钮是“下一个按钮”？？？
@NidhinChandran 进入下一步的巡演...
@R1z1a 你能提供包括“下一步”按钮的代码吗？

标签： javascript jquery html bootstrap-tour

【解决方案1】：

编写一个函数来检查“myDiv1”和“myDiv2”的可见性，并将其命名为引导程序的onShown。

/* function to check visibility of divs and disable or enable next */
function checkThirdDivAndNextBtn() {
    if ($("#myDiv1").is(":visible") || $("#myDiv2").is(":visible")) {
        $("#myDiv3").hide();
        $('.btn[data-role="next"]').prop("disabled", true);
    } else {
        $("#myDiv3").show();
        $('.btn[data-role="next"]').prop("disabled", false);
    }
}

$("#b1").on('click', function() {
    $("#myDiv1").toggle();
    checkThirdDivAndNextBtn();
});

$("#b2").on('click', function() {
    $("#myDiv2").toggle();
    checkThirdDivAndNextBtn();
});

然后在Bootstrap Tour中调用函数

var tour = new Tour({
    storage: false,
    steps: [],
    backdrop: false,
    onShown: function(tour) {
        checkThirdDivAndNextBtn();
    }
});

Check this fiddle

【讨论】：