Question

我正在使用Materialize，我想将几个功能发现步骤插入帮助菜单。

我有一个功能性的 CodePen 样机，但随后的步骤扩展了视口（高度/宽度），并且没有正确设置元素的样式。有没有更好的方法来遍历元素？

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll(".tap-target");
  M.TapTarget.init(elems);
});

function next(n) {
  var inst;

  // Get each of the elements
  var elems = document.querySelectorAll(".tap-target");

  var current = n;
  var prev = --n;

  // If a previous target is open, close it.
  if(prev >= 0) {
    inst = M.TapTarget.getInstance(elems[prev]);
    inst.close();
    inst.destroy();
  }

  // Then, open the new target
  inst = M.TapTarget.getInstance(elems[current]);
  inst.open();
}

HTML

<button id="help" onclick="next(0)">help</button>

<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>

<div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="next(1)">Next</div>
    </div>
  </div>

 <div class="tap-target red" data-target="menu2">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="closeAll()">Dismiss</div>
    </div>
  </div>

Answer 1

我想出了一种方法。在您的html中，每个点击目标的末尾，添加以下内容：

<div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><!--Your button code here--></div>

因此它应该像这样：

<button id="help" onclick="next(0)">help</button>

<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>

<div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="next(1)">Next</div>
    </div>
    <div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a></div>
  </div>

 <div class="tap-target red" data-target="menu2">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="closeAll()">Dismiss</div>
    </div>
    <div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a></div>
  </div>

您可以内联样式更改目标的位置。据我了解，当页面加载时，Materialize应该加载我为目标提供的代码，但是以某种方式在v1.0中，它将无法工作。因此，您将需要手动添加它。

Answer 2

<div id="Recorrido_Sistema">
  <div class="tap-target tema_proyecto white-text" id="paso2" data-target="vcxv">
    <div class="tap-target-content">
      <h5>Title000</h5>
      <p>A bunch of text00</p>
    </div>
  </div>
</div>

function sdfsdf() {
    let options = [0]
    let elems = document.querySelectorAll('.tap-target');
    let instances = M.TapTarget.init(elems, options);
  }

function tutorial(paso) {
  let eje1 = `<div class="tap-target tema_proyecto white-text" id="paso1" data-target="botonadmin">
        <div class="tap-target-content">
            <h5>Title5</h5>
            <p>A bunch of text</p>
            <a onclick="tutorial(1)" class="next triadiccolor2 waves-effect waves-light btn"><i
                    class="material-icons ">skip_next</i></a>
        </div>
    </div>`;
  let eje2 = `<div class="tap-target tema_proyecto white-text" id="paso2" data-target="dsfdffsdgkllkl">
        <div class="tap-target-content">
            <h5>Title22222222222222</h5>
            <p>A bunch of text22222222222222</p>
            <a onclick="tutorial(2)" class="next triadiccolor2 waves-effect waves-light btn"><i
                    class="material-icons ">skip_next</i></a>
        </div>
    </div>`;
  let pasosaver = [eje1, eje2];
  document.getElementById("Recorrido_Sistema").innerHTML = pasosaver[paso];
  sdfsdf();
  if (paso == pasosaver.length) {
    $('.tap-target').tapTarget('close')
  } else {
    $('.tap-target').tapTarget('open')
  }
}

实现多步特征发现

2 个答案: