javascript - 如何使按钮将类应用于文档流中的下一个 div？

Question

我正在尝试使用 jQuery 制作一个按钮，通过连续将每个步骤加粗来让您完成一系列步骤。我还希望每个步骤在单击时加粗，而在单击任何其他步骤时不加粗。因此，它需要知道哪一步已经加粗，然后在单击按钮时加粗下一步。我是 jQuery 的新手，不知道怎么说!

这是我的 html:

<div id="container">

  <div id="step1">
    1. Step 1.
  </div>

  <div id="step2">
    2. Step 2.
  </div>

  <div id="step3">
    3. Step 3.
  </div>

  <div id="step4">
    4. Step 4.
  </div>

  <div id="step5">
    5. Step 5.
  </div>

  <button>
    NEXT STEP
  </button>

这是我的CSS:

#container {
  height: 90%;
  width: 60%;
  border: 1px solid black;
  border-radius: 3px;
  margin: 5% 20%;
  padding: 10px;
  line-height: 1.5em;
}

button {
  float: right;
  position: relative;
  margin-top: -8px;
  background-color: black;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  padding: 8px;
}

div {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

这是我尝试启动的 jQuery(只是为了单击步骤以将其加粗):

$(function() {

  $("#step1").click(function (){
    $("#step1").addClass("bold")
  })

  $("#step2").click(function (){
    $("#step2").addClass("bold")
  })

  $("#step3").click(function (){
    $("#step3").addClass("bold")
  })

  $("#step4").click(function (){
    $("#step4").addClass("bold")
  })

  $("#step5").click(function (){
    $("#step5").addClass("bold")
  })

})

每个步骤都有一个单独的函数似乎也很重复。有没有办法将它们全部结合起来？我尝试过，但随后单击一个步骤将所有步骤加粗。

Answer 1

为每个step元素添加一个step类，我想这应该能满足你的要求:

    $('.step').click(function(){
      $('.bold')
        .removeClass('bold');
      $(this)
        .addClass('bold');
    });

    $('button').click(function(){
      if( $('.bold').length < 1 ){
        $('.step')
          .first()
            .addClass('bold');
      }
      else {
        $('.bold')
          .removeClass('bold')
            .next('.step')
              .addClass('bold');
        if($('.bold').length < 1){
           $('.step')
             .first()
               .addClass('bold');
        }
      }
    });

#container {
  height: 90%;
  width: 60%;
  border: 1px solid black;
  border-radius: 3px;
  margin: 5% 20%;
  padding: 10px;
  line-height: 1.5em;
}

button {
  float: right;
  position: relative;
  margin-top: -8px;
  background-color: black;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  padding: 8px;
}

div {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="step1" class="step">1</div>
  <div id="step2" class="step">2</div>
  <div id="step3" class="step">3</div>
  <div id="step4" class="step">4</div>
  <div id="step5" class="step">5</div>
  <div id="step6" class="step">6</div>
  <div id="step7" class="step">7</div>
  <div id="step8" class="step">8</div>
  <button>Next Step</button>
</div>

JSBIN

更新:包括删除所有按钮:

     // To bold a step when it is clicked,
     // first remove any existing bold class,
     // then bold the step that was clicked
    $('.step').click(function() {
      $('.bold')
        .removeClass('bold');
      $(this)
        .addClass('bold');
    });

     // To bold the next step when next button is clicked:
     // If there are no bold steps, bold the first one
    $('.next').click(function() {
      if ($('.bold').length < 1) {
        $('.step')
          .first()
          .addClass('bold');
      }
      // If there are bold steps, remove the current bold class, add bold class to the step after it
      else {
        $('.bold')
          .removeClass('bold')
          .next('.step')
          .addClass('bold');

        // If there weren't any steps after the bold classes were removed, add bold class to the first step
        if ($('.bold').length < 1) {
          $('.step')
            .first()
            .addClass('bold');
        }
      }
    });

     // To remove .bold classes from all steps
    $('.reset').click(function() {
      $('.bold').removeClass('bold');
    });

#container {
  height: 90%;
  width: 60%;
  border: 1px solid black;
  border-radius: 3px;
  margin: 5% 20%;
  padding: 10px;
  line-height: 1.5em;
}
/* 
      .clear to fix the buttons problem.
      Watch out when you use float: left
      or float: right.
    */

.clear:before,
.clear:after {
  content: '';
  display: table;
}
.clear:after {
  clear: both
}
.next,
.reset {
  float: right;
  position: relative;
  margin-top: -8px;
  background-color: black;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  padding: 8px;
}
.reset {
  background: hsl(349, 86%, 50%);
  margin-right: 10px;
}
div {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.bold {
  font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="step1" class="step">1</div>
  <div id="step2" class="step">2</div>
  <div id="step3" class="step">3</div>
  <div id="step4" class="step">4</div>
  <div id="step5" class="step">5</div>
  <div id="step6" class="step">6</div>
  <div id="step7" class="step">7</div>
  <div id="step8" class="step">8</div>
  <div class="clear">
    <button class="next">Next Step</button>
    <button class="reset">Reset</button>
  </div>
</div>