1

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

1 回答 1

0

编写一个函数来检查“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();
    }
});

检查这个小提琴

于 2017-06-29T09:31:23.950 回答