避免重复的javascript

我有一个HTML表格，里面有大约30条相似的线条。每一行是这样的：避免重复的javascript

<tr> 
    <td>Car Park</td> 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
    <td><input type="text" id="local_parking_t" name="amenity_text[]" value="Car park"></td> 
</tr>

如果没有选中该复选框，需要禁用文本框，以避免它的值传递给后面MySQL查询。我可以做到这一点与此javascript的一行：

document.getElementById('local_parking').onchange = function() { 
    document.getElementById('local_parking_t').disabled = !this.checked; 
};

然而，用不同的ID重复JavaScript 30次以上似乎是不合理的混乱。有没有更好的办法？

来源

2017-04-01 TrapezeArtist

抓住每一个checkbox并绑定change事件侦听器。如果用户检查指定的checkbox - 启用相应的text输入。

var checkboxes = document.querySelectorAll('input[type=checkbox]'), 
 
    inputs = document.querySelectorAll('input[type=text]'); 
 
    
 
    [...checkboxes].forEach((v,i) => v.addEventListener('change', function(){ 
 
     inputs[i].disabled = !this.checked; 
 
    }));

<tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car park"></td> 
 
</tr> 
 
<br> 
 
<tr> 
 
    <td>Some txt</td> 
 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car "></td> 
 
</tr>

来源

2017-04-01 12:52:50

完美的作品。你的确是一位“善良的用户”。我能够放弃ID，因为他们只是为了我的JavaScript的目的。只有一个小问题：Dreamweaver抛出一个突出显示以“Array”开头的行的问题。虽然我看不到它。有任何想法吗？ – TrapezeArtist

@TrapezeArtist Array.from是一个ES6功能，可能无法访问例如。 IE 7.您可以使用扩展运算符。现在检查。 –

这两个版本似乎都能很好地工作，但Dreamweaver仍然不喜欢它。它是CS5.5，所以也许有一些新东西不能识别。 – TrapezeArtist

您可以使用通用类来定位CHECKBOX元素，然后使用DOM遍历方法来定位INPUT元素。

var elements = document.querySelectorAll('.local_parking'); 
 
elements.forEach(function(element) { 
 
    element.addEventListener('change', function() { 
 
    this.parentNode.nextElementSibling.childNodes[0].disabled = !this.checked; 
 
    }); 
 
});

<table> 
 
    <tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" class="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" class="local_parking_t" name="amenity_text[]" value="Car park" disabled></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" class="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" class="local_parking_t" name="amenity_text[]" value="Car park" disabled></td> 
 
    </tr> 
 
</table>

来源

2017-04-01 12:52:41 Satpal

避免重复的javascript

回答

相关问题