基于复选框，下拉列表和数量字段的条件onclick

时间：2018-03-14 17:40:58

标签： javascript jquery html css

我正在尝试根据条件制作插入按钮的onclick属性（或粘贴到插入按钮的onclick属性所引用的addtocart（）函数中的产品ID）。我有2个复选框，一个下拉列表中有4个产品，还有一个数量字段（限于数字：0,3,5,8）。

举个例子：

场景1：[复选框1：已选中;复选框2：未选中;产品4：选择;数量：5;] = Internal_product_id：987987

结果：

function addToCart(){
  CartJS.addItem(987987);
}

场景2：[复选框1：已选中;复选框2：未选中;产品4：已选中;数量：3;] = Internal_product_id：123123

结果：

function addToCart(){
  CartJS.addItem(123123);
}

所有64种情景都是相关的，需要加以考虑。

到目前为止，我收到了以下代码：

-<!DOCTYPE html><html lang='en' class=''>
<head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script>

<style>

   
.bg {
 width: 100%;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
}

  
.row:after {
    content: "";
    display: table;
    clear: both;
    
}



.count-input {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}
.count-input input {
  width: 100%;
  height: 42px;
  border: 1px solid #000
  border-radius: 2px;
  background: none;
  text-align: center;
}
.count-input input:focus {
  outline: none;
}
.count-input .incr-btn {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input .incr-btn:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input .incr-btn_2 {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input .incr-btn_2:first-child {
  right: auto;
  left: 0;
  top: 46%;
}


.count-input .incr-btn_3 {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input .incr-btn_3:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input.count-input-sm {
  max-width: 125px;
}
.count-input.count-input-sm input {
  height: 36px;
}
.count-input.count-input-lg {
  max-width: 200px;
}
.count-input.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
    border: 1px solid #000;
    border-radius: 2px;
    background: none;
    padding: 10.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}


.sum_output {
    background: none;
    padding: 10px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.accordion_img {
  width:200%;
}

.checkbox_align_0 {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.checkbox_align_1 {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 22px;
}

.checkbox_align_2 {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 29px;
}

.checkbox_align_3 {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 33px;
}

.flex-item {
  margin-top: 10px;
  text-align: center;
}

label {
  display: block;
}

input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
  background: transparent;
  width: 100%;
  height: 42px;
  padding: 10px;
  display: block;
  border: 1px solid #d1d3d4;
  border-radius: 0;
  outline: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

</style>
</head>
<body>


<ul class="flex-container">

  <li class="flex-item">
     <section class="grid__spans-25">
  <select id="list1">
   <option value="1" data-imagesrc="http://placehold.it/64x64">Product 1</option>
    <option value="2" data-imagesrc="http://placehold.it/64x64">Product 2</option>
    <option value="3" data-imagesrc="http://placehold.it/64x64">Product 3</option>
    <option value="4" data-imagesrc="http://placehold.it/64x64">Product 4</option>
</select>
  
</section>
  </li>
  
</ul>


<input class="checkbox_align_1" style="width:20px;height:20px;" type="checkbox" id="include" name='include' data-target="drop_1" />


<input class="checkbox_align_1" style="width:20px;height:20px;" type="checkbox" id="include_4" name='include_4' data-target="drop_1" />

<div id="drop_1" class="sum_output">= $ 0.00</div>

<div class="count-input space-bottom">
  <a class="incr-btn" data-action="decrease" data-target="drop_1" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="0"/>
  <a class="incr-btn" data-action="increase" data-target="drop_1" href="#">+</a>
</div>      
       
<input type="button" class="button_mobile" value="Add" onclick="addToCart()">
<script>                  

var _EXTRAVAL = 1;

var _EXTRAVAL_4 = 1;



$(".incr-btn").on("click", function(e) {
    // Prevent default action
    e.preventDefault();

    // Set variable for the method
    var button = $(this);
    var labelNb = button.parent().find('.quantity');
    var labelPrice = $("#" + button.attr('data-target'));
    var currentNb = button.parent().find('.quantity').val();
    var newNb = 0;

    // Remove 'inactive' class
    $('.incr-btn[data-action="decrease"]').removeClass('inactive');

    // Increase or decrease
    if (button.attr('data-action') == "increase") {
	  if ((currentNb) >= 8 ){
	  // nichts machen
	  }else{
		  if ((currentNb == 0)||(currentNb == 5)){
			newNb = parseFloat(currentNb) + 3;
		  }else if((currentNb == 3)){
			newNb = parseFloat(currentNb) + 2;
		  }
		
	  }
        
    }
    
    if (button.attr('data-action') == "decrease") {
	  if ((currentNb) <= 0 ){
	  // nichts machen
	  }else{
		  if ((currentNb == 8)||(currentNb == 3)) {
			newNb = parseFloat(currentNb) - 3;
		  }else if((currentNb == 5)){
			newNb = parseFloat(currentNb) - 2;
		  }
		
	  }
        
    } 


    var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
    var isExtra_4 = $("#include_4").prop('checked') ? _EXTRAVAL_4 : 0;
    $(labelNb).val(newNb);
    $(labelPrice).css('display', 'block').html("=  $" + String((((newNb) * 55) + (isExtra) + (isExtra_4)).toFixed(2)));
    
});

$("#include").on('click', function(){
    // Set variable for method
    var checkbox = $(this);
    var labelPrice = $("#" + $(".incr-btn").attr('data-target'));
    var labelPriceFloat = parseFloat(labelPrice.html().substring(4));
    
    // If checkbox is check, increse price
    if (checkbox.prop('checked')) {
        labelPrice.html("=  $" + String((labelPriceFloat + _EXTRAVAL).toFixed(2)));
    } else {
        labelPrice.html("=  $" + String((labelPriceFloat - _EXTRAVAL).toFixed(2)));
    }
});


$("#include_4").on('click', function(){
    // Set variable for method
    var checkbox = $(this);
    var labelPrice = $("#" + $(".incr-btn").attr('data-target'));
    var labelPriceFloat = parseFloat(labelPrice.html().substring(4));
    
    // If checkbox is check, increse price
    if (checkbox.prop('checked')) {
        labelPrice.html("=  $" + String((labelPriceFloat + _EXTRAVAL_4).toFixed(2)));
    } else {
        labelPrice.html("=  $" + String((labelPriceFloat - _EXTRAVAL_4).toFixed(2)));
    }
});

    
</script>   

<script>

function addToCart(){
  CartJS.addItem(Internal_product_id);
}
</script>

</body></html>

  
    

具有固定外部ID的解决方案

  

由于我必须使用外部ID来引用产品，因此缺少的元素是每个产品的代码：

  if ((document.getElementById("include").checked == true) && (document.getElementById("include_4").checked == true) && (document.getElementById("list1").value == 1))
              {var ShowButton_value_1 = document.getElementById('ShowButton_value_1').value
              var id14 = "11192355913771"
              CartJS.addItem(id14,ShowButton_value_1);}

我直接将数量变量ShowButton_value_1添加到CartJS函数。

请参阅J.M.Echevarría的解决方案，该解决方案在代码本身内生成唯一ID。

1 个答案:

答案 0 :(得分：1)

然后您需要的是从四个元素中获取值，并使用一些标准您必须（这是重要的细节，没有人可以帮助您），出现带有身份证。例如，如果我要生成自己的ID，这将始终是唯一的，因为元素的每个组合都是唯一的，它就像：

function addToCart(){
    var id = ($("#include").prop('checked') ? 1 : 0) + '' + 
        ($("#include_4").prop('checked') ? 1 : 0) + '' + 
        $("select#list1").val() + '' + 
        $('#ShowButton_value_1').val();

    CartJS.addItem(parseInt(id));
}

单引号只是强迫他们添加字符串的黑客。

parseInt以防万一你需要将参数作为整数。

希望这能为你的道路增添一些亮点。 LMK

相关问题
最新问题