Question

我有一个使用div的“工具提示”，基本上，当客户单击他们想要查看的工具提示时，它会显示并在3个工具提示之间正常工作。

但是，当客户端一次在工具提示中单击“下一步”时，我很费劲，我希望该工具提示隐藏并显示下一个工具提示ID。

例如如果他们单击查看工具提示1，则单击工具提示1中的下一步，这将隐藏工具提示1并显示工具提示2。当然，我们也想在用户单击时反转它。

请参见我的Codepen示例：-https://codepen.io/scottYg55/pen/mNbqyj

  <div class="a-div">
    <div id="tooltip1" class="tooltip-cont">tooltip 1 show
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
  <div>

  <div class="testtest">
   <div class="b-div">
      <div id="tooltip2" class="tooltip-cont">tooltip 2 show 
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
    <div>
  </div>

  <div class="testtestt">
   <div class="c-div">
      <div id="tooltip3" class="tooltip-cont">tooltip 3 show
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
    <div>
  </div>

       <ul>
           <li>
             <div class="help-tip" data-id="tooltip1">Tooltip 1
             </div>
           </li>
           <li>
             <div class="help-tip" data-id="tooltip2">Tooltip 2
             </div>
           </li>
             <li>
             <div class="help-tip" data-id="tooltip3">Tooltip 3
             </div>
           </li>
       </ul>

CSS

    .tooltip-cont {display:none;}
    .show {display:block;}

jQuery

$(".help-tip").on('click', function() {
  $('.tooltip-cont').removeClass("show");
  $('#' + $(this).data('id')).toggleClass('show');
});

$(".next").on("click", function() {
    $(this).parent().fadeOut(500);
    $(this).find('.tooltip-cont').addClass("show");
});

Answer 1

为了知道下一个或上一个工具提示是什么，您需要跟踪活动ID var modalChart = document.getElementById("chart"), totalEnviado = 4, totalRecebido = 3, totalAberto = 2, totalConvertido = 1, my_gradient = "orange"; // -- var myChart = new Chart(modalChart, { type: 'bar', data: { labels: ['Total enviado', 'Total recebido', 'total aberto', 'total convertido'], datasets: [{ backgroundColor: my_gradient, data: [totalEnviado, totalRecebido, totalAberto, totalConvertido] }] }, options: { legendCallback: function(chart) { var text = []; text.push('<div class = "modal-graph-container">'); text.push('<div class = "modal-graph-inner">'); for (var i = 0; i < chart.data.labels.length; i++) { console.log(chart.data.datasets[i]); // see what's inside the obj. text.push('<div class = "modal-graph-child">'); text.push('<span style="">' + chart.data.labels[i] + '</span>'); console.log(chart.data.labels[i]); text.push('</div>'); } text.push('</div>'); text.push('</div>'); return text.join(""); }, legend: { display: false }, scales: { xAxes: [{ display: true, categoryPercentage: 1.0, barPercentage: 1.0, ticks: { beginAtZero: true, display: false }, gridLines: { drawTicks: false } }], yAxes: [{ ticks: { beginAtZero: true, display: false }, gridLines: { display: false, drawTicks: false } }] } } });，我们将在此处保存值，以便以后可以知道下一个或上一个工具提示。

此功能用于显示一些工具提示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="border:1px solid #000">
  <canvas id="chart"></canvas>
</div>

以下仅是下次单击和返回单击的助手，它将更新以显示新的工具提示。

var activeToolTipId = 0

演示链接：https://codepen.io/Mocni/pen/YmKENj?editors=1010

Answer 2

不同的方法

jQuery：

let index = 0;
$(".help-tip").on('click', function() {
   $('#showtooltipid').text($(this).data('id'))
});

$(".next, .back").on("click", function() {
$('#showtooltipid').text($(".help-tip").eq(index).data('id'))
    $(this).find('.tooltip-cont').addClass("show");
    index = $(this).hasClass('next') ? index + 1 : index - 1;
    if (index > 2) {
        index = 0;
    }
    if (index < 0) {
       index = 2;
    }
});

HTML：

      <div class="a-div">
    <span id="showtooltipid"></span>
    <div id="tooltip1" class="tooltip-cont">
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
  <div>
  <ul>
    <li>
      <div class="help-tip" data-id="tooltip1">Tooltip 1</div>
    </li>
    <li>
     <div class="help-tip" data-id="tooltip2">Tooltip 2
             </div>
           </li>
             <li>
             <div class="help-tip" data-id="tooltip3">Tooltip 3
             </div>
           </li>
       </ul>

单击下一步显示下一个div

2 个答案: