javascript - 我想创建一个循序渐进的订单，这就是我目前所拥有的

Question

谈到 JavaScript，我刚出炉。几个月来，我一直是一名活跃的匿名读者和学习者(或潜伏者)，我已经对编写 HTML 和 CSS 感到非常自在，但 JavaScript 是我想要了解的新人.

为了解释我的个人任务，我正在尝试创建一个逐步订单。我要实现的功能是，当您按下特定的 div (我的 JSFiddle 中的服务之一)时，您将进入第 2 步，当您在第 2 步中选择另一个 div (我的 JSFiddle 中的 Packages) 您将进入第 3 步，依此类推。但是，这里的问题是，如果我已经选择了服务 1 并且想要选择服务 2，则切换功能会适得其反。我是。 A. 菜鸟。

我想做的是一种显示/隐藏，如果其中一个 div 具有 selected 类，它将显示该 div 的正确隐藏内容。如果未选中，它将保持隐藏状态。我一直在使用 dataid="#" 来判断下一步要定位到哪个 div。

那么，对于我可以做些什么来完成我的任务，你有什么建议或提示吗？

这是我的 JSFiddle .

<!-- START SERVICE 1 -->
  <div class="col-md-3">
    <div class="service noselect" dataid="service_1">
      <h4>Service 1</h4>
    </div>
  </div>
<!-- END SERVICE 1 -->

JS:

// to show the unique div hidden behind each different service, dataid="#div"
$('.service').bind('click', function(){
    var target = $(this).attr('dataid');
    $("#"+target).toggle('fast');
});

// for toggling the ".selected" on click of service(s)
$('.service').click(function(event) {
$('.service').not(this).removeClass('selected');
$(this).toggleClass('selected');
});

非常感谢<3

Answer 1

这是我认为您正在尝试实现的逻辑的一个非常简化的版本。

$('a').on('click',function(e) {
  e.preventDefault();
  // remove selected class from links after the current one
  $(this).closest('section').nextAll('section').find('a').removeClass('selected');
  // remove selected from siblings, toggle current selected class
  $(this).siblings('a').removeClass('selected').end().toggleClass('selected');
  var $target = $('#'+$(this).attr('data-id'));
  if ($target.length) {
    // hide any steps after the current one that may be shown
    $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
    // toggle display of selected step
    $target.toggleClass('active'); 
  } else {
    console.log('do something else to end this thing');
  }
})

.step {
  display: none;
}
.active {
  display: block;
}
a {
  transition: color .25s;
  display: inline-block;
  padding: 2em;
  border: 1px solid #aaa;
  border-radius: 1em;
}
.selected {
  color: red;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <a href="#" data-id="one">1</a> 
  <a href="#" data-id="two">2</a>
  <a href="#" data-id="three">3</a>
</section>

<section>
  <div id="one" class="step">
    <h1>1</h1>
    <a href="#" data-id="one-one">1</a> 
    <a href="#" data-id="one-two">2</a>
    <a href="#" data-id="one-three">3</a>
  </div>
  <div id="two" class="step">
    <h1>2</h1>
    <a href="#" data-id="two-one">1</a> 
    <a href="#" data-id="two-two">2</a>
    <a href="#" data-id="two-three">3</a>
  </div>
  <div id="three" class="step">
    <h1>3</h1>
    <a href="#" data-id="three-one">1</a> 
    <a href="#" data-id="three-two">2</a>
    <a href="#" data-id="three-three">3</a>
  </div>
</section>

<section>
  <div id="one-one" class="step">
    <h1>1-1</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="one-two" class="step">
    <h1>1-2</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="one-three" class="step">
    <h1>1-3</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="two-one" class="step">
    <h1>2-1</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="two-two" class="step">
    <h1>2-2</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="two-three" class="step">
    <h1>2-3</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="three-one" class="step">
    <h1>3-1</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="three-two" class="step">
    <h1>3-2</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div id="three-three" class="step">
    <h1>3-3</h1>
    <a href="#">1</a> 
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</section>