Question

我有这段代码：

＆＃13;

//first element price and image
  function Conf_front_lights() {
	 //first element price
    var front_lights = 2 ;
    var checkBox = document.getElementById("front_lights");
//check the checkbox
if (checkBox.checked == true){
//if is checked add value to total
    document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) + front_lights;
    var img = document.createElement("img");
    img.src = "https://dummyimage.com/300x300/473847/ff0000.png&text=Red+Front+Lights";
    			var src = document.getElementById("overlay");
          // append the image to OverlayDIV
    			src.appendChild(img); 	
    	  } else {
// //if is unchecked substract value from total
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) - front_lights;
          //remove Image from Overlay DIV
    			 $( "overlay" ).remove( ":contains('front_lights')" );
    		
    		
    	  }
    }

     function Conf_hood() {	
    			var hood = 15 ;
    			var checkBox = document.getElementById("hood");
    	  if (checkBox.checked == true){
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) + hood;
    			var img = document.createElement("img");
    			img.src = "https://dummyimage.com/300x300/72cfcf/0000ff.png&text=hood";
    			var src = document.getElementById("overlay");
    			src.appendChild(img); 	
    	  } else {
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) - hood;
    			 $( "overlay" ).remove( ":contains('hood')" );
    		
    		
    	  }
    }

     function Conf_front_spoiler() {	
    			var front_spoiler = 60 ;
    			var checkBox = document.getElementById("front_spoiler");
    	  if (checkBox.checked == true){
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) + front_spoiler;
    			var img = document.createElement("img");
    			img.src = "https://dummyimage.com/300x300/cfcc74/0000ff.png&text=front+spoiler";
    			var src = document.getElementById("overlay");
    			src.appendChild(img); 	
    	  } else {
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) - front_spoiler;
    			 $( "overlay" ).remove( ":contains('front_spoiler')" );
    		
    		
    	  }
    }

     function Conf_back_lights() {	
    			var back_lights = 2 ;
    			var checkBox = document.getElementById("back_lights");
    	  if (checkBox.checked == true){
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) + back_lights;
    			var img = document.createElement("img");
    			img.src = "https://dummyimage.com/300x300/e68f1e/000000.png&text=back+lights";
    			var src = document.getElementById("overlay");
    			src.appendChild(img); 	
    	  } else {
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) - back_lights;
    			 $( "overlay" ).remove( ":contains('back_lights')" );
    		
    		
    	  }
    }

     function Conf_back_spoiler() {	
    			var back_spoiler = 25 ;
    			var checkBox = document.getElementById("back_spoiler");
    	  if (checkBox.checked == true){
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) + back_spoiler;
    			var img = document.createElement("img");
    			img.src = "https://dummyimage.com/300x300/e6208d/000000.png&text=back+spoiler";
    			var src = document.getElementById("overlay");
    			src.appendChild(img); 	
    	  } else {
    			document.getElementById("total").innerHTML = parseInt(document.getElementById("total").innerHTML) - back_spoiler;
    			 $( "overlay" ).remove( ":contains('back_spoiler')" );
    		
    		
    	  }
    }

＆＃13;

#overlay{position:relative;border:1px solid #f1f4f9}
#overlay img{position:absolute;top:0;left:0;right:0;margin:0 auto}
#overlay img:first-child{position:relative}
#overlay img{background:none!important}

＆＃13;

<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/1.11.0/jquery.min.js"></script>
    <div class="row">
    <div class="col-lg-4 text-left">
    <form action="self.php">
    	<ul class="list-group">
    		<li class="list-group-item"><strong>Front Car</strong><br />
    			<input type="checkbox" name="front_car" onclick="Conf_front_lights()" id="front_lights" value="1"> Red Front Lights  <strong>+ 2 &euro;</strong> <br />
    			<input type="checkbox" name="front_car" onclick="Conf_hood()" id="hood" value="2"> Red Hood  <strong>+ 15 &euro;</strong> <br />
    			<input type="checkbox" name="front_car" onclick="Conf_front_spoiler()" id="front_spoiler" value="3"> Red Front Spoiler  <strong>+ 60 &euro;</strong> <br />
    		</li>
    		<li class="list-group-item"><strong>Back Car</strong><br />
    			<input type="checkbox" name="back_car" onclick="Conf_back_lights()" id="back_lights" value="1"> Red Back Lights  <strong>+ 2 &euro;</strong> <br />
    			<input type="checkbox" name="back_car" onclick="Conf_back_spoiler()" id="back_spoiler" value="2"> Red Back Spoiler  <strong>+ 25 &euro;</strong> <br />
    		</li>
    	</ul>
    </form>
    </div>
    <div class="col-lg-8 text-center">
      <div class="text-right"><button class="btn btn-primary btn-lg">Total: <span id="total" value="3">3</span> &euro;</button></div>
      <div id="overlay"><img src="https://dummyimage.com/300x300/000000/ff00cc.png&text=Base+Image" /></div>
    </div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

它会计算数学和总计算但是如果取消选中图像叠加dosn`t功能。我试图删除子节点，但如果我检查第一个和第三个和第五个并取消选中第三个，它将删除第一个图像。

所有图像都是PNG，它只包含汽车的特定部分，其余的PNG是透明的。

我在PHP工作，我知道一点点javascript。

如果取消选中，我想删除单独选择的PNG。提前谢谢。

Answer 1

您未正确使用选择器。标识为Overlay的容器应按如下方式选择：

$("#Overlay")

其次，:contains选择器仅适用于具有文本内容的元素。您不能将参数应用于源URL，并期望选择器解析该参数以选择元素。

您有几个选项，但基本上您需要做的是创建可由DOM选择的单个元素。这意味着将属性应用于每个图像，以区别于每个其他图像。这样你就可以轻松追加并删除它。

以下代码是您如何操作添加到叠加层的图像标记的示例。

＆＃13;

let g_box = $("#grill");
let s_box = $("#spoiler");

g_box.on("click", function(e) {
let overlay = $("#Overlay"), checked = $(this).prop("checked");

(checked) ? overlay.append("<img src='http://via.placeholder.com/350x150' id='grill_img'/>") : overlay.find("#grill_img").remove();
})

s_box.on("click", function(e) {
let overlay = $("#Overlay"), checked = $(this).prop("checked");

(checked) ? overlay.append("<img src='http://via.placeholder.com/350x150' style='filter: invert(100%)' id='spoiler_img'/>") : overlay.find("#spoiler_img").remove();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">

</div>
<label>Grill</label><input type="checkbox" id="grill">
<label>Spoiler</label><input type="checkbox" id="spoiler">

＆＃13;

另外，我建议不要像你一样使用JavaScript和JQuery。我的建议是为这个应用选择一个。它只会让您的代码库混淆和混乱，以便像这样互换使用。

用复选框覆盖图像javascript

1 个答案: