Question

我在这里有一些代码，我想缩短，我怎么能这样做？我应该创建一个循环吗？我应该创建一个内部循环的功能，以便不断添加＆＃39; 1＆＃39;每一次？除了数字之外，有3组代码的行是相同的。拜托，我真的需要一个答案：

function checkit(){
var radio1img1 = document.getElementById("radio1img1");
var radio1img2 = document.getElementById("radio1img2");
var radio1img3 = document.getElementById("radio1img3");
var radio1img4 = document.getElementById("radio1img4");
var radio1img5 = document.getElementById("radio1img5");
var radio1img6 = document.getElementById("radio1img6");
var radio1img7 = document.getElementById("radio1img7");
var radio1img8 = document.getElementById("radio1img8");
var radio1img9 = document.getElementById("radio1img9");

if (radio1img1.checked){
    changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img1','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img2.checked){
    changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img2','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img3.checked){
    changeImage('img3','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img3','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img4.checked){
    changeImage('img4','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img4','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img5.checked){
    changeImage('img5','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img5','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img6.checked){
    changeImage('img6','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img6','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img7.checked){
    changeImage('img7','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img7','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img8.checked){
    changeImage('img8','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img8','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img9.checked){
    changeImage('img9','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img9','http://i.imgur.com/RcuPIGF.png');
}
}

<table border="2">
<tr>
<td align="center"><b>B1</b></td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img1">
<img align="center" name="radio1" class="theimage" id="img1" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img2">
<img align="center" name="radio1" class="theimage" id="img2" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img3">
<img align="center" name="radio1" class="theimage" id="img3" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img4">
<img align="center" name="radio1" class="theimage" id="img4" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img5">
<img align="center" name="radio1" class="theimage" id="img5" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img6">
<img align="center" name="radio1" class="theimage" id="img6" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img7">
<img align="center" name="radio1" class="theimage" id="img7" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img8">
<img align="center" name="radio1" class="theimage" id="img8" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img9">
<img align="center" name="radio1" class="theimage" id="img9" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
</tr>
</table>

Answer 1

不要使用表格布局。他们对移动布局没有反应，并且他们不适合您正在显示的元素。如果需要表格布局，请使用CSS表格布局。
不要使用旧的表达属性，例如align。这也应该由CSS处理。
使用循环。这也将使你不需要每个元素的id。
使用背景图片。这将使您的HTML更加清晰。

＆＃13;

bindRadios('radio1');

function bindRadios(name) {
  var radios = document.querySelectorAll('input[name="' + name + '"]');
  for (var i = 0; i < radios.length; i++) {
    radios[i].onchange = function() { checkIt(radios) };
  }
}

function checkIt(radios) {
  for (var i = 0; i < radios.length; i++) {
    radios[i].parentNode.style.backgroundImage =
      'url(' + (
        radios[i].checked 
          ? 'http://i.imgur.com/QAUUxYF.jpg' // green check
          : 'http://i.imgur.com/RcuPIGF.png' // red X
      ) + ')';
  }
}

＆＃13;

.table {
  display: table;
  border: 2px solid black;
}
.table > label {
  display: table-cell;
  width: 65px;
  height: 45px;
  background: url('http://i.imgur.com/DGofFGc.png')
              right / 45px 45px
              no-repeat;
}
.bold {
  font-weight: bold;
}

＆＃13;

<div class="table">
  <div class="bold">B1</div>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
</div>

＆＃13;

缩短我的JS＆amp; HTML代码

1 个答案: