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

Question

我有 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>

JS

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();
}
}

Answer 1

编写一个函数来检查“myDiv1”和“myDiv2”的可见性，并将其称为 Bootstrap 游览的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