javascript - 寻找方法来重构我创建的 div 切换的 jQuery 代码

Question

我编写了一些代码，考虑到三件事:

1. 使用“点击时”突出显示选区的边框。
2. 选择一项将取消另一项的突出显示。
3. 能够在点击时取消选择每个项目。

我已经设法让一切正常工作，但我不太喜欢选择一项时出现的径向点的代码有多复杂。

下面是我正在讨论的示例，特别是我正在寻找将下面的代码重构为更易读(更短)的方法。

$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
       .siblings().children('.radial').children().removeClass('checked');

这是一个了解更多上下文的工作示例(第 10 行):

var raceInternet = false;
var racePhone = false;
var raceTv = false;

$(function() {
  var $targetDiv = $('#race-internet > .itembox');
  var $radialDot = $('.radial > .center-dot');
  $targetDiv.on('click', function() {
    $(this).toggleClass('user-selected').siblings().removeClass('user-selected');
    //Is it possible to refactor Line 10?
    $(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
    if ($targetDiv.is('.user-selected')) {
      raceInternet = true;
    } else {
      raceInternet = false;
    }
  })
})

.itembox-container {
  display: flex;
}
.boxes-2 {
  width: calc((100% - 25px)/2);
  margin: 10px;
  padding: 10px;
}
.itembox {
  position: relative;
  display: inline-block;
  border: 5px solid #e8e8e8;
  border-radius: 10px;
  cursor: pointer;
}
.user-selected {
  border: 5px solid #E16E5B;
}
.itembox h4 {
  color: #22ddc0;
  font-weight: 700;
}
span.price {
  display: inline-block;
  font-weight: 400;
  float: right;
  color: #22ddc0;
}
.itembox > ul {
  list-style: none;
}
.itembox > ul > li {
  line-height: 3;
}
.radial {
  position: absolute;
  float: right;
  height: 35px;
  width: 35px;
  padding: 2px;
  border: 5px solid #e8e8e8;
  border-radius: 50%;
  top: 43%;
  right: 10px;
}
.center-dot {
  display: none;
  position: relative;
  height: 21px;
  width: 21px;
  background-color: #E16E5B;
  border-radius: 50%;
}
.checked {
  display: block;
}
.prime-aux:first-of-type {
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <!-- Primary Content Container -->
  <div class="prime-aux">
    <div id="race-internet" class="itembox-container">
      <div class="itembox boxes-2">
        <h4>Gigabit Internet <span class="price">$60/mo</span></h4>
        <ul>
          <li>1,000 Mbps</li>
          <li>No data caps</li>
        </ul>
        <div class="radial">
          <div class="center-dot"></div>
        </div>
      </div>
      <div class="itembox boxes-2">
        <h4>Basic Internet <span class="price">$25/mo</span></h4>
        <ul>
          <li>25 Mbps</li>
          <li>No data caps</li>
        </ul>
        <div class="radial">
          <div class="center-dot"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Primary Content Container End -->

View on JS Fiddle

Answer 1

只需利用 CSS，您就可以消除大量 jQuery。通常，如果我想切换某个功能，我可以根据 CSS 选择器使用 display: block; 或 display: none;。然后，我只使用 jQuery 来切换父元素的类名。例如:

.item.selected .checkmark {
  display: block;
}

.item .checkmark {
  display: none;
}

$('.item').click(function(){ $(this).toggleClass('selected') });

JSFiddle