Question

我有3个div，前两个是可见的，然后是第3个隐藏，在前2个中每个都有一个按钮，按下它时隐藏div，当两个都隐藏时，第3个变为可见。问题是我怎样才能禁用＆＃34;如果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

编写一个功能来检查＆＃39; myDiv1＆＃39;的可见性。和＆＃39; myDiv2＆＃39;并将其命名为bootstrap tour 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

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

1 个答案: