在javascript

Question

我这样line of code：

 htmlcontent =  htmlcontent+'<div class="checkbox" id="chkpos[j]">'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>';  

外部css中的ids是这样的：

            #chkpos1{
                /*position: relative;*/
                margin-top: 8%;   
            }
            #chkpos2{
                /*position: relative;*/
                margin-top: 26%;   
            }
            #chkpos3{
                /*position: relative;*/
                margin-top: 17%;   
            }  

如何让javascript代码（'<div class="checkbox" id="chkpos[j]">'）访问这些ID？ 有任何想法吗？

Answer 1

如果你想在你的CSS中使用Ids（虽然我建议使用类似Cerbrus说的那样）设置你的Id就像这样：

htmlcontent =  htmlcontent+'<div class="checkbox" id="chkpos' + j + '">'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>';

您不能在css中使用[ ]括号作为ID，因为CSS会将这些用于属性（例如input[type=text]）。

就像我说的那样，我建议使用类，所以在你的JS中：

htmlcontent =  htmlcontent+'<div class="checkbox chkpos chkpos' + j + '">'+ //etc...

CSS：

.chkpos {
    /*position: relative;*/
}
.chkpos1 {
    margin-top: 8%;   
}
.chkpos2 {
    margin-top: 26%;   
}
.chkpos3 {
    margin-top: 17%;   
} 

Answer 2

[]是元素ID（或类）的无效字符，因为它们在CSS中用于属性。

改用类：

htmlcontent = htmlcontent +
    '<div class="checkbox" class="chkpos pos' + j + '">' + 
        optionAlpha +
            '<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>' +
                option +
            '</label>' +
        htmloptionImage +
    '</div>'; 

CSS：

.chkpos {
    /*position: relative;*/
}
.chkpos.pos1 {
    margin-top: 8%;   
}
.chkpos.pos2 {
    margin-top: 26%;   
}
.chkpos.pos3 {
    margin-top: 17%;   
} 

Answer 3

避免[]括号，我认为 j 用于循环

  htmlcontent =  htmlcontent + "<div class="checkbox" class='chkpos " + j + "'>'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>";

css

.chkpos {
    /*position: relative;*/
}
.chkpos.1 {
    margin-top: 8%;   
}
.chkpos.2 {
    margin-top: 26%;   
}
.chkpos.3 {
    margin-top: 17%;   
}