我想创建一步一步的顺序，这是我到目前为止

Question

在JavaScript方面，我从烤箱中脱颖而出。我已经是一个活跃的匿名读者和学习者（或潜伏者）几个月了，我已经感觉很舒服编码HTML和CSS，但JavaScript是我想要了解的新人。

为了解释我的个人任务，我正在尝试创建一个一步一步的命令。我想要完成的功能是当你按下一个特定的div （我的JSFiddle中的服务之一）你将进入第2步，当你在步骤2中选择另一个div （我的JSFiddle中的包）你将进入第3步，依此类推。但是，这里的问题是，如果我已经选择 Service 1 并且想要选择 Service 2 ，则切换功能会逆流。我。 A. Noob。

我想要做的是一种显示/隐藏，如果其中一个div具有选择类，它将显示该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');
});

非常感谢＆lt; 3

Answer 1

这是我认为你想要实现的逻辑的一个非常简化的版本。

＆＃13;

＆＃13;

$('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');
  }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;