javascript - 为什么 $ (".tab-list").each() 不运行？

Question

这个想法是一个简单的 html 选项卡。

https://codepen.io/ryboh1/pen/abzGEJj

$(".tab-list").each( () => {
    $("#p").html("hello")    
    /* for each tab-list*/
    let $this = $(this);
    let $tab = $this.find("li.active");
    let $link = $tab.find("a");
    let $panel = $($link.attr("href"));

    /*When Clicked on a tab add this function*/
    $this.on("click", "tab-control", (e) => {
        e.preventDefault();
        let $link = $(this);
        let id = this.hash;


        if (id && !$link.is("active")) {
            $panel.removeClass("active");
            $tab.removeClass("active");


        $panel = $(id).addClass("active");
        $tab = $link.parent().addClass("active");
        }
    });
});

当您单击选项卡时，内容会发生变化。

我尝试使用 Chrome 开发工具并复制并粘贴 js 的第一行，然后它就运行了。这让我很困惑。 任何帮助将不胜感激

Answer 1

Ass Ritesh 说，箭头函数没有 this，因此如果您愿意，可以将 () => {} 转换为 function() { }。此外，您还缺少 "tab-control"

中的 .

工作示例

$(".tab-list").each(function() {
  $("#p").html("hello")
  /* for each tab-list*/
  let $this = $(this);
  let $tab = $this.find("li.active");
  let $link = $tab.find("a");
  let $panel = $($link.attr("href"));
  /*When Clicked on a tab add this function*/
  $this.on("click", ".tab-control", function(e) {
    e.preventDefault();
    let $link = $(this);
    let id = this.hash;


    if (id && !$link.is("active")) {
      $panel.removeClass("active");
      $tab.removeClass("active");


      $panel = $(id).addClass("active");
      $tab = $link.parent().addClass("active");
    }
  });
});

/* Create page*/

.create {
  bottom: 75px;
  top: 75px;
  left: 20px;
  font-size: large;
  width: 100px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container create position-absolute">
  <div class="row">

    <div class="col-3">
      <ul class="list-group headings tab-list">
        <li class="active"><a href="#tab-goal" class="tab-control">Goal</a></li>
        <li><a href="#tab-response" class="tab-control">Response</a></li>
        <li><a href="#tab-reward" class="tab-control">Reward</a></li>
        <li><a href="#tab-cue" class="tab-control">Cue</a></li>
        <li><a href="#tab-craving" class="tab-control">Craving</a></li>
        <li><a href="#tab-preview" class="tab-control">Preview + Create</a></li>
        <ul>
    </div>

    <div class="col-9">
      <form onsubmit="theTemplate.submitForm('createForm')" id="createForm" action="GET" class="tab-content">
        <div id="tab-goal" data-tab-content class="active form-group tab-panel">
          <h1>Goal</h1>
          <label>What is your desired outcome?</label>
          <input name="goalOne" type="text" class="form-control">
          <label>What type of person achieves that outcome?</label>
          <input name="goalTwo" type="text" class="form-control">
        </div>

        <div id="tab-response" data-tab-content class="form-group tab-panel">
          <h1>Response</h1>
          <label>What habit does this type of person have?</label>
          <input name="responseOne" type="text" class="form-control">
          <p>List what you could do for the first 2 minutes of this new habit, from very easy to very difficult.</p>
          <table name="responseTwo" class="table-sm">
            <tr>
              <th>Very Easy</th>
              <td><input name="vEasy" type="text"></td>
            </tr>
            <tr>
              <th>Easy</th>
              <td><input name="easy" type="text"></td>
            </tr>
            <tr>
              <th>Normal</th>
              <td><input name="normal" type="text"></td>
            </tr>
            <tr>
              <th>Difficult</th>
              <td><input name="difficult" type="text"></td>
            </tr>
            <tr>
              <th>Very Difficult</th>
              <td><input name="vDifficult" type="text"></td>
            </tr>
          </table>
        </div>

        <div id="tab-reward" data-tab-content class="tab-panel">
          <h1>Reward</h1>
          <label>What can you keep track of to measure your progress?</label>
          <input name="rewardTwo" type="text" class="form-control">
          <label>What will you use to track your progress?</label>
          <input name="rewardOne" type="text" class="form-control">
        </div>

        <div id="tab-cue" data-tab-content class="tab-panel">
          <h1>Cue</h1>
          <label>How can you design your enviroment to make it obivous to do your new habit?</label>
          <input name="cueOne" type="text" class="form-control">
          <label>Which established habit will you do before your new habit?</label>
          <input name="cueTwo" type="text" class="form-control">
        </div>

        <div id="tab-craving" data-tab-content class="tab-panel">
          <h1>Craving</h1>
          <label>How can you re-frame your new habit to make it seem more attractive?</label>
          <input name="cravingOne" type="text" class="form-control">
          <label>What habit you want to do, will you do after your new habit?</label>
          <input name="cravingTwo" type="text" class="form-control">
        </div>

        <div id="tab-preview" data-tab-content class="tab-panel">
          <h1>Preview + Save Habit</h1>
          <label for="">To download your cheat sheet click Preview Habit</label>
          <button type="submit" class="btn btn-primary">Preview Habit</button>
          <lab for="">To save your habit to "Habit List", to download later click Save Habit.</lab>
          <button type="submit" class="btn btn-primary">Save Habit</button>
        </div>

      </form>
    </div>
  </div>
</div>