尋找方法來修改我的jQuery代碼爲我創造

Question

我寫了一些代碼，在考慮三件事一個div切換：

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