Question

在我当前的代码段中，您会看到带有静态定价的div <p class="package-cost">$xx</p>。然后在同一个父元素中，有一个如下输入：<input type="checkbox" class="tp-pack-check" data-solo-price="10" data-combined-price="8">具有多个数据价格。

我可以从这些复选框中映射出选定的值，然后显示相应的数据属性，但这都是基于另一个更改函数。

我希望根据包裹选择显示价格.package-cost div。如果package1和2都被选中，那么每个.tp-package将获得适当的data-combined-price ...........但如果只选择了一个包，例如package2 {每个.package-cost的{1}}将使用.tp-package属性进行显示。

**请注意 - 为了减少代码，我只发布了包2的div。因此要么自己选择包2，要么将包1和2放在一起。

我知道我的代码中的映射函数与此特定问题无关。我只想表明我是如何为这种情况做的。

总结......

如果选择了包1和包，则data-solo-price中的定价应为：

-8

-13

-18

如果仅选择了套餐2，则.package-cost内的定价应为：

-10

-15

-20

＆＃13;

.package-cost

＆＃13;

var pgReview = $('#pg-review');
var tpReview = $('#tp-review');
$('.product-check').on('change', function () {
  if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
    $('#tp-package-wrap').show();
    $('#pack-1').show();
  }
  else if ($('#package1').is(':checked')) {
    $('#tp-package-wrap').hide();
    $('#pack-1').show();
  }
  else if ($('#package2').is(':checked')) {
    $('#tp-package-wrap').show();
    $('#pack-1').hide();
  }
});
if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
  var price1 = $('.tp-pack-check:checked').map(function() {
    return "$" + $(this).data('combined-price');
  }).toArray().join(" ");
  tpReview.html(price1);
} else {
  if ($('#package2').is(':checked')) {
    var price = $('.tp-pack-check:checked').map(function() {
      return "$" + $(this).data('solo-price');
    }).toArray().join(" ");
    tpReview.html(price);
  } else if ($('#package1').is(':checked')) {
    console.log("Price - Package 2");
  }
}

＆＃13;

#pack-1, #tp-package-wrap {
  display: none;
}

＆＃13;

根据更改的选择显示可变数据属性值

0 个答案: