Question

我正在构建一个线框。

我在做什么＆amp;我想要实现的目标：

我们尚未集成后端，但我使用的是AngularJS。但是，我实际上还没有使用AngularJS指令。到目前为止，我使用普通的Vanilla JavaScript来构建所有8个线框及其内容。
大约6/8的幻灯片几乎相同。它们具有相同的精确单选按钮（低，中，高），但它们各自具有不同的标题文本（标签为蓝色）。此时我已完成构建第二张幻灯片（这是使用无线电输入布局的第一张幻灯片）。一切看起来都很精致，但是现在我正在继续构建第三张幻灯片，这也是使用单选按钮，我的代码开始看起来非常多余，我已经知道当我完成时这将变得非常冗长所有6张具有相同3个单选按钮的幻灯片的JavaScript代码。

**在我尝试集成一个可以帮助自动化幻灯片的无线电创建过程的功能之前，这是我的代码：**

＆＃13;

var initialize = function() { 
  
  //        =================
  // 		FOR THE 2ND SLIDE
  // 	    =================
  var s2 = document.getElementById("slide2");
  var s2Label = document.createElement("label");
     s2Label.appendChild(document.createTextNode("Works with minors, elderly, ill or other potentially vulnerable person?"));
  s2.appendChild(s2Label);

  var slide2CboxContainer.document.createElement("Div");
  slide2CboxContainer.setAttribute("id", "slide2-cbox-container");
  slide2CboxContainer.setAttribute("class", "row");
  s2.appendChild(slide2CboxContainer);

  var counter2 = 1;
  for (var i = 0; i < 3; i++) {
    slide2CboxContainer.appendChild(document.createElement("Div")).setAttribute("id", "slide2checkbox" + counter2++);
  };

  // for radio inputs on slide 2  --  (s2c1, s2c2, s2c3)
  var s2c1 = document.getElementById("slide2checkbox1");
  var s2c2 = document.getElementById("slide2checkbox2");
  var s2c3 = document.getElementById("slide2checkbox3");
  
  
  // creating text labels for each radio input -- reusable
  var low = document.createElement("p");
      low.setAttribute("class", "low");
  low.appendChild(document.createTextNode("Low"));

  var med = document.createElement("p");
      med.setAttribute("class", "med");
   med.appendChild(document.createTextNode("Med"));

  var high = document.createElement("p");
      high.setAttribute("class", "high");    high.appendChild(document.createTextNode("High"));

  
   var l = document.createElement("label");
   	   l.setAttribute("class", "checkbox-inline");
   var i = document.createElement("input");
   	   i.setAttribute("type", "radio");
   	   i.setAttribute("name", "optradio");
   	   i.setAttribute("class", "radio");
   	   l.appendChild(i);
  	   s2c1.setAttribute("class", "checkbox-inline");
   	   s2c1.appendChild(l);
   	   s2c1.appendChild(low);


   var l = document.createElement("label");
   	   l.setAttribute("class", "checkbox-inline");
   var i = document.createElement("input");
       i.setAttribute("type", "radio");
   	   i.setAttribute("name", "optradio");
   	   i.setAttribute("class", "radio");
   	   l.appendChild(i);
   	   s2c2.setAttribute("class", "checkbox-inline");
   	   s2c2.appendChild(l);
   	   s2c2.appendChild(med);


    var l = document.createElement("label");
   	    l.setAttribute("class", "checkbox-inline");
    var i = document.createElement("input");
   	    i.setAttribute("type", "radio");
   	    i.setAttribute("name", "optradio");
   	    i.setAttribute("class", "radio");
   	    l.appendChild(i);
   	    s2c3.setAttribute("class", "checkbox-inline");
   	    s2c3.appendChild(l);
   	    s2c3.appendChild(high);


  // 			=================
  // 			FOR THE 3RD SLIDE
  // 			=================
  
   	var s3 = document.getElementById("slide3");
   	var s3Label = document.createElement("label");
   		   s3Label.appendChild(document.createTextNode("Fiduciary responsibility/Access to Cash?"));
   		s3.appendChild(s3Label);

  var slide3CboxContainer = document.createElement("Div");
  	slide3CboxContainer.setAttribute("id", "slide3-cbox-container");
  			slide3CboxContainer.setAttribute("class", "row");
  	s3.appendChild(slide3CboxContainer);
   	var counter3 = 1;
  	for (var i=0; i<3; i++) {		slide3CboxContainer.appendChild(document.createElement("Div")).setAttribute("id", "slide3checkbox" + counter3++);
  		};
  
  //this is where I would keep rewriting the same code to create the checkboxes
  var s3c1 = document.getElementById("slide3checkbox1");
  var s3c2 = document.getElementById("slide3checkbox2");
  var s3c3 = document.getElementById("slide3checkbox3");
  
};
initialize();

＆＃13;

#tab-container {
  height: 15em;
  width: 5%;
  /*border: 1px solid black;*/
  position: absolute;
  left: 18%;
  margin-top: 6em;
}
.tab {
  height: .5em;
  width: 12%;
  border-radius: 20px;
  margin: 1.2em auto;
  background-color: #10b9e4;
}
#slide2 {
  position: absolute;
  left: 12%;
  height: 18em;
  width: 76%;
  margin-top: -1.5em;
  z-index: -2;
  border-radius: 4px;
  background-color: rgba(243, 239, 239, 0.6);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
#slide2-cbox-container,
#slide3-cbox-container {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}
#slide2checkbox1,
#slide2checkbox2,
#slide2checkbox3,
#slide3checkbox1,
#slide3checkbox2,
#slide3checkbox3 {
  display: inline-block;
  margin-left: 7em;
}
.low,
.med,
.high {
  margin-left: 1em;
}
.radio {
  margin-top: 1em;
  display: inline-block;
}
#slide3 {
  position: absolute;
  left: 14%;
  height: 18em;
  width: 72%;
  margin-top: -2em;
  z-index: -3;
  border-radius: 4px;
  background-color: rgba(243, 239, 239, 0.6);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
label {
      display: block;
      /*margin: 30px 0 0 0;*/
      margin-top: 4em;
      text-align: center;
      /*float:left;*/
    }

＆＃13;

<div id="container" ng-app="cscoringApp" ng-controller="jobsController">

  <!-- for the blue tabs/dots -->
  <div id="tab-container">
    <div id="tab1" class="tab"></div>
    <div id="tab2" class="tab"></div>
    <div id="tab3" class="tab"></div>
    <div id="tab4" class="tab"></div>
    <div id="tab5" class="tab"></div>
    <div id="tab6" class="tab"></div>
    <div id="tab7" class="tab"></div>
    <div id="tab8" class="tab"></div>
  </div>
  <br>
  <div id="slideContainer" class="col-xs-8 col-xs-     offset-2" style="margin-top:5em;">

  </div>

＆＃13;

这是我的JavaScript代码，我目前正在尝试集成一个功能来自动创建按钮

此功能有效，但它仅适用于标签为＆＃34; high＆＃34;的最后一个单选按钮。（s2c3）。

＆＃13;

var s2c1 = document.getElementById("slide2checkbox1");
var s2c2 = document.getElementById("slide2checkbox2");
var s2c3 = document.getElementById("slide2checkbox3");
					

var create = function(a, b, c){
	var l = document.createElement("label");
	    l.setAttribute("class", "checkbox-inline");
    var i = document.createElement("input");
        i.setAttribute("type", "radio");
        i.setAttribute("name", "optradio");
        i.setAttribute("class", "radio");
	    l.appendChild(i);		
								a.setAttribute("class", "checkbox-inline");
								a.appendChild(l);
								a.appendChild(low);
								b.setAttribute("class", "checkbox-inline");
								b.appendChild(l);
								b.appendChild(med);
								c.setAttribute("class", "checkbox-inline");
								c.appendChild(l);
								c.appendChild(high);
							
						};
						create(s2c1, s2c2, s2c3);

＆＃13;

为多个HTML元素创建动态无线电输入

0 个答案: