javascript - 在 jquery 中单击选项卡时禁用单击？

Question

我遇到了这个问题。在我的代码中，当我反复单击选项卡:mod-2 或 mod-3 时，边框将继续扩大。单击选项卡时如何停止？

问题 2:如何检查 html 中是否已存在代码 div class="l-item"？如果已经存在，js中的.wrapInner会停止运行吗？:

$('.vd-list li').wrapInner('<div class="l-item"></div>');

演示:http://jsfiddle.net/b9tcvjxg/

$('.mod-1').on('click', function() {
  $('.display-tab .on').removeClass('on');
  $(this).addClass('on');
  $('.vd-list').removeClass('mod-2').removeClass('mod-3').addClass('mod-1');
  $('.vd-list .l-item').contents().unwrap();
  $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').show();
});

$('.mod-2').on('click', function() {
  $('.display-tab .on').removeClass('on');
  $(this).addClass('on');
  $('.vd-list').removeClass('mod-1').removeClass('mod-3').addClass('mod-2');
  $('.vd-list li').wrapInner('<div class="l-item"></div>');
  $('.vd-list .v-date, .vd-list .v-info-i:last-child').hide();
  $('.vd-list .v-desc').show();
  return false;
});

$('.mod-3').on('click', function() {
  $('.display-tab .on').removeClass('on');
  $(this).addClass('on');
  $('.vd-list').removeClass('mod-1').removeClass('mod-2').addClass('mod-3');
  $('.vd-list li').wrapInner('<div class="l-item"></div>');
  $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').hide();
});

.tab-list {
  display: inline-block;
  vertical-align: middle;
}

.tab-list li {
  float: left;
  height: 48px;
  line-height: 48px;
  margin-right: 20px;
  cursor: pointer;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.mod-2 .l-item,
.mod-3 .l-item {
  border: 3px solid #111;
}

.mod-1 .r::after {
  content: "Mod 1";
  color: red;
  font-weight: bold;
}

.mod-2 .r::after {
  content: "Mod 2";
  color: green;
  font-weight: bold;
}

.mod-3 .r::after {
  content: "Mod 3";
  color: blue;
  font-weight: bold;
}

ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul class="tab-list display-tab">
  <li class="mod-1 on">Mod 1</li>
  <li class="mod-2">Mod 2</li>
  <li class="mod-3">Mod 3</li>
</ul>

<ul class="vd-list mod-1">
  <li>
    <div class="l"></div>
    <div class="r">
      <div class="v-desc">desc</div>
      <div class="v-info">
        <span class="v-info-i">1</span>
        <span class="v-info-i">2</span>
        <span class="v-info-i">3</span>
      </div>
      <div class="v-date">date</div>
    </div>
  </li>
</ul>

Answer 1

你可以这样做:

$('.mod-2').on('click', function() {
  $('.display-tab .on').removeClass('on');
  $(this).addClass('on');

  $('.vd-list').removeClass('mod-1').removeClass('mod-3').addClass('mod-2');

  var alrdyExists = $(".vd-list").find(".l-item").length > 0;
    if(!alrdyExists) {
       $('.vd-list li').wrapInner('<div class="l-item"></div>');
    }

  $('.vd-list .v-date, .vd-list .v-info-i:last-child').hide();
  $('.vd-list .v-desc').show();
    return false;
});

这只会将 mod-2 内容边框一次，因为它通过使用 find 并检查结果的长度来检查 mod-2 是否已包含 l-item。

您可以在单击时将相同的方法应用于 mod-3。

这是一个工作 fiddle ，以防万一:http://jsfiddle.net/e3fjqnhb/2/