Javascript多引号CSS属性输出不正确

Question

我正在尝试输出一个div数组。我的问题是JS语法中的引号。

}style = "style='background-color:#30C;'";

var add1    = 'add_to_collection(\''+k+'/'+i+'\');';

var add2    = 'change_color(\''+i+'/'+k+'\');';

divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
}
}

document.getElementById('divs').innerHTML = divs_b; 

document.getElementById('start').style.display = "none";

我后来在源代码中输入了以下内容：

引号完全不同，CSS标记完全消失。

 <div style="float:left;" class="divs" onclick="add_to_collection(" 2="" 1');change_color('1="" 2');="">2/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 3="" 1');change_color('1="" 3');="">3/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 4="" 1');change_color('1="" 4');="">4/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 5="" 1');change_color('1="" 5');="">5/1</div>

我的首选输出如下所示：

 <div style="float:left;" class="divs" onclick="add_to_collection('2/1');change_color('1/2');" style="background-color:#30C;">2/1</div>

这里的整个功能：

 function build(){


 /*var collect_border       =   document.getElementById('collect_border').innerHTML;
 var collect_objects    = document.getElementById('collect_objects').innerHTML;
 var collect_enemies    = document.getElementById('collect_enemies').innerHTML;*/

  var collect_exit      = document.getElementById('collect_exit').value;
 /*var collect_start        = document.getElementById('collect_start').value;
 var collect_bonus      = document.getElementById('collect_bonus').value;*/


 /*collect_border           = collect_border.split(';');
 collect_objects            = collect_objects.split(';');
 collect_enemies            = collect_enemies.split(';');*/
 collect_exit           = collect_exit;
 /*collect_start            = collect_start;
 collect_bonus          = collect_bonus.split(';');
 */

 var x_val  = document.getElementById('width').value;

 var y_val  = document.getElementById('height').value;

 var divs_b     = "";

 var brk    = "";

 var style  = "";


 for(var i=1;i<=y_val;i++){     



 for(var k=1;k<=x_val;k++){ 



if((i>1)&&(k==1)){
    brk = "style='clear:both;'";
}
else {
    brk = "style='float:left;'";    
}
// var addval = '"'+i+'"/"'+k+'"';
if(collect_exit!=""){
    col_exit = collect_exit.split("/");
    var col_exit_x = col_exit[0];
    var col_exit_y = col_exit[1];

    if((col_exit_x==i)&&(col_exit_y==k)){


    }
}style = "style='background-color:#30C;'";

var add1    = 'add_to_collection(\''+k+'/'+i+'\');';

var add2    = 'change_color(\''+i+'/'+k+'\');';

     divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
 }
 }

 document.getElementById('divs').innerHTML = divs_b;    

 document.getElementById('start').style.display = "none";

 }

Answer 1

这将使用createElement()

构建元素

  

如果要对每个元素应用相同的样式，请为该元素指定一个类并为该类设置样式。

---

----------的 DEMO ----------

---

＆＃13;

＆＃13;

function build(){
//Use your existing values. I have added k & i for demo purposes
	var k="2";
	var i="1";
//Target = where you want the elements to be inserted
var target = document.getElementById('MyElements');
//Create new element
var element = document.createElement('div');
/*
You can apply other attributes -
element.setAttribute('id','YourID');
element.setAttribute('class','YourClass');
*/
element.setAttribute('style','float:left;background-color:#30C;');
element.setAttribute('onclick', 'add_to_collection(\''+k+'/'+i+'\');change_color(\''+i+'/'+k+'\');');
//Insert new element
target.appendChild(element);
// Set innerHTML to element.
element.innerHTML=" Click me! ";
}

/*To show the new elements trigger the functions*/
function change_color(a){
alert("change_color called. Values:"+a);  
}
function add_to_collection(a){
alert("change_color called. Values:"+a);  
}

＆＃13;

<button onclick="build()">Bulid New element</button>
<div id="MyElements"></div>

＆＃13;

＆＃13;

＆＃13;

  

将演示放入现有功能

 function build(){
 /*var collect_border       =   document.getElementById('collect_border').innerHTML;
 var collect_objects    = document.getElementById('collect_objects').innerHTML;
 var collect_enemies    = document.getElementById('collect_enemies').innerHTML;*/
  var collect_exit      = document.getElementById('collect_exit').value;
 /*var collect_start        = document.getElementById('collect_start').value;
 var collect_bonus      = document.getElementById('collect_bonus').value;*/
 /*collect_border           = collect_border.split(';');
 collect_objects            = collect_objects.split(';');
 collect_enemies            = collect_enemies.split(';');*/
 collect_exit           = collect_exit;
 /*collect_start            = collect_start;
 collect_bonus          = collect_bonus.split(';');
 */
 var x_val  = document.getElementById('width').value;
 var y_val  = document.getElementById('height').value;
 var brk    = "";
 /*------- This isn't needed anymore
 var divs_b     = "";
 var style  = "";
 --------------------------------------*/
 for(var i=1;i<=y_val;i++){     
 for(var k=1;k<=x_val;k++){ 
if((i>1)&&(k==1)){
    brk = "clear:both;";
}
else {
    brk = "float:left;";    
}
// var addval = '"'+i+'"/"'+k+'"';
if(collect_exit!=""){
    col_exit = collect_exit.split("/");
    var col_exit_x = col_exit[0];
    var col_exit_y = col_exit[1];
    if((col_exit_x==i)&&(col_exit_y==k)){
    }
}
//--- (New) Added brk to set part of the style depending on the result from your if statement.
var target = document.getElementById('divs');
var element = document.createElement('div');
element.setAttribute('style',brk+'background-color:#30C;');
element.setAttribute('onclick', 'add_to_collection(\''+k+'/'+i+'\');change_color(\''+i+'/'+k+'\');');
target.appendChild(element);
element.innerHTML=k+"/"+i;
/* -------- This isn't needed anymore
style = "style='background-color:#30C;'";
var add1    = 'add_to_collection(\''+k+'/'+i+'\');';
var add2    = 'change_color(\''+i+'/'+k+'\');';
divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
----------------------------------------- */
 }
 }
/*------------This isn't needed anymore
 document.getElementById('divs').innerHTML = divs_b;  
-------------------------*/  
 document.getElementById('start').style.display = "none";
 }

这应该适合你，如果你有任何问题让我知道，所以我们可以解决它们。

我希望这会有所帮助。快乐的编码！