javascript - 如何使用 div 元素和输入的组合来增加价格？

Question

我见过的关于该主题的大多数示例都是人们操纵输入框来相应地增加和更新总价格。

我的困境是，我使用了两个 div，并且当用户检查与路由器选项相关的输入时，我试图进一步提高价格，该选项仅在他们选择了千兆位或基本互联网时才会出现。

我已经为这三个项目设置了自定义数据属性data-price=val"，并且我还设法至少在两个框中的任何一个被选中时更新总价。我只是不知道如何最好地将输入/复选框价格增加到总价(如果选中)。

JSFiddle 供引用:https://jsfiddle.net/976dc1xd/

非常感谢任何帮助/意见。

谢谢

-M

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

var $internetDiv = $('#race-internet > .itembox'),
    $targetRouter = $('.router-container'),
    $continueDiv = $('#int-continue');

$(function() {
  $internetDiv.on('click', function(){
  	$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
    if($internetDiv.hasClass('user-selected')) {
      $targetRouter.slideDown(300);
      $continueDiv.text('Continue');
      raceInternet = true;
    } else {
      $('#check1').prop('checked', false);
      $targetRouter.slideUp(300);
      $continueDiv.text('Continue without Internet');
      raceInternet = false;
    }
  })
});

// Function to increment Total
$(function() {
  var total = 0;
  $internetDiv.on('click', function() {
    if($(this).is('.user-selected')) {
      total = $(this).data('price');
    } else if ($(this).not('.user-selected')) {
      total = 0;
    }
    $('.int-price').text('$' + total + '/mo');
  })
})

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

p {
	font-size:16px;
}


h2 {
	color:#787878;
	font-weight:700;
}

.divider {
	background-color:#e8e8e8;
	height:2px;
}

.prime-aux {
	position:relative;
	padding:15px;
	-webkit-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
		-moz-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
			box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
	overflow:hidden;
}

.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:700;
	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;
}

.itembox .center-dot {
	display:none;
	position:relative;
	height:21px;
	width:21px;
	background-color:#E16E5B;
	border-radius:50%;
}

.itembox.user-selected .center-dot{
  display: block;
}

/* ===(Internet) Router Item === */

#check1:not(:checked),
#check1:checked {
	position:absolute;
	left:-99999px;
}

#check1:not(:checked) + label,
#check1:checked + label {
  position: relative;
  padding-left:50px;
	font-size:18px;
  cursor: pointer;
}

/* checkbox aspect */
#check1:not(:checked) + label:before,
#check1:checked + label:before {
  content: '';
  position: absolute;
  left:10px;
	top:0;
  width: 25px;
	height: 25px;
  border: 5px solid #e8e8e8;
  border-radius: 5px;
}

/* checked mark aspect */
#check1:not(:checked) + label:after,
#check1:checked + label:after {
  content: '■';
  position: absolute;
  top:-15px;
	left:13px;
  font-size: 35px;
  color: #E16E5B;
}

/* checked mark aspect changes */
#check1:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
#check1:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* disabled checkbox */
#check1:disabled:not(:checked) + label:before,
#check1:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
#check1:disabled:checked + label:after {
  color: #999;
}
#check1:disabled + label {
  color: #aaa;
}

#check1:checked ~ span {
	color:#22ddc0;
}

.router-container {
	display:none;
	height:100%;
}

.router-item {
	margin:25px 0;
	max-width:525px;
	-webkit-animation-delay:.5s;
		-moz-animation-delay:.5s;
			animation-delay:.5s;
}

.router-item label {
	color:#787878;
}

.router-item span {
	float:right;
	color:#787878;
	font-size:18px;
	font-weight:700;
}

/* === Price Bar === */


.price-bar:before {
	content:'';
	display:block;
	background:#e8e8e8;
	height:1px;
	margin:10px;
}

.price-bar p {
	position:relative;
	margin:0;
	top:5px;
	left:10px;
	float:left;
}

/* === Continue Button === */

.continue {
	display:inline-block;
	font-size: 18px;
	color:#fff;
	background-color:#E16E5B;
	border:0;
	border-radius:0;
	float:right;
	margin-right:10px;
}

.continue:hover {
	color:#fff;
	background-color:#E16E5B;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container main"><!-- Primary Content Container -->
      <div class="prime-aux">
        <h2>Internet</h2>
        <hr class="divider"/>
        <div id="race-internet" class="itembox-container">
          <div class="itembox boxes-2 noselect" data-price="60">
            <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 noselect" data-price="25">
            <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 class="router-container clear">
          <div class="router-item animated pulse">
            <input id="check1" type="checkbox" name="check" value="check1" data-price="10"/>
            <label class="noselect" for="check1">Add Wi-Fi Router</label>
            <span class="price">+ $10/mo</span>
          </div>
        </div>
        <div class="price-bar">
          <p>Total: <span class="int-price">$0/mo</span></p>
          <div id="int-continue" class="continue btn">Continue without Internet</div>
        </div>
      </div><!-- First Prime Aux End -->
    </section> <!-- Primary Content Container End -->

Answer 1

我建议你集中逻辑，我在这里所做的是抽象 updatePrice 函数并将其绑定(bind)到 onClick 方法到 $routerCheck 和 $internetDiv 选择器。

var $internetDiv = $('#race-internet > .itembox'),
    $routerCheck = $('#check1'),
    $targetRouter = $('.router-container'),
    $continueDiv = $('#int-continue');

$(function() {
  $internetDiv.on('click', updatePrice);
  $routerCheck.on('click', updatePrice);
})

function updatePrice() {
    var total = $('.user-selected').data('price') || 0;

    if ($routerCheck.prop('checked'))
        total += $routerCheck.data('price');

    $('.int-price').text('$' + total + '/mo');
}