javascript - 基于复选框、下拉列表和数量字段的条件点击

标签 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>

Solution with fixed external IDs

因为我必须使用外部 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 的解决方案。

最佳答案

然后您所需要做的就是从这四个元素中获取值，然后使用一些您必须具备的标准(这是重要的细节，没有人可以帮助您)，得出与身份证。例如，如果我要生成我自己的 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

关于javascript - 基于复选框、下拉列表和数量字段的条件点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49284422/

上一篇：css - 旁路溢出 :hidden position:relative of layout ancestor

下一篇：javascript - 图像调整大小和裁剪。调整大小时框移动的问题

相关文章：

javascript - 在鼠标事件之间传递数据

php - PHP 和 JavaScript 中具有 2 个值的十六进制 XOR

javascript - 通过 JavaScript 访问 XML

javascript - 如何将 3 个不同 div 的可见性切换为三个相应的 div

html - Div 内部的 Div 填充整个父 DIV，不显示 :Table

javascript - 排序后的谷歌图表(表格)重新设计

javascript - 图像 Angular 根据鼠标位置变化

jQuery 计数器计数到目标数字

html - 摆好我的 table

javascript - 动态导航列表菜单

©2024 IT工具网  联系我们