[英]How to reduce Document.getelementbyid
Here a code contain a lot of document.getelementbyid
for simplify a list box for show and hide on on-click of radio button in JavaScript now am trying reduce the code but as a beginner of jquery learning on the way so kindly some one help to reduce this in jquery? 此处的代码包含大量document.getelementbyid
用于简化JavaScript中单选按钮的单击显示和隐藏的列表框。现在正在尝试简化代码,但作为jquery学习的初学者,请提供一些帮助减少这在jQuery中?
<script language="JavaScript" type="text/javascript">
function fun(s) {
/* table 1 */
if (s == "maingroup") {
document.getElementById("subgroup").value = null;
document.getElementById("itemname").value = null;
document.getElementById("subgroup_value").value = null;
document.getElementById("itemname_value").value = null;
document.getElementById("maingroup").style.display = '';
document.getElementById("subgroup").style.display = 'none';
document.getElementById("itemname").style.display = 'none';
}
}
<script>
$("#subgroup,#itemname,#subgroup_value,#itemname_value").val('');
$("#maingroup,#subgroup,#itemname").hide();
$('#sample-ID').val() ;
$('#sample-ID1').hide();
$('#sample-ID1').css('display','none');
Ok how about this (now even smaller) ( demo ) 好吧,这(现在更小)了( 演示 )
You can use this JavaScript: 您可以使用以下JavaScript:
function fun(s) {
var table = $('#'+s.parents('tr').data('id'));
$('select,input[type=hidden]', table).val('').hide();
$('#'+s.val()).show();
}
function fu() {
$('select').hide();
}
$(function () {
$('input[type=radio]').on('click', function () {
fun($(this));
});
fu();
})
With the following (cleaned up) HTML: 使用以下(清理过的)HTML:
<table>
<tr data-id='Table1'>
<td><input type="radio" name="A" value="maingroup" /></td>
<td>Main Group</td>
<td><input type="radio" name="A" value="subgroup" /></td>
<td>Sub Group</td>
<td><input type="radio" name="A" value="itemname" /></td>
<td>Item Name</td>
</tr>
<tr data-id='Table2'>
<td><input type="radio" name="B" value="country" /></td>
<td>Country</td>
<td><input type="radio" name="B" value="zone" /></td>
<td>Zone</td>
<td><input type="radio" name="B" value="state" /></td>
<td>State</td>
<td><input type="radio" name="B" value="city" /></td>
<td>City</td>
<td><input type="radio" name="B" value="Areamanager" /></td>
<td>Area Manager</td>
<td><input type="radio" name="B" value="outlet" /></td>
<td>Outlet</td>
</tr>
</table>
<span id='Table1'>
<select id="maingroup">
<option value="1">AA</option>
<option value="2">BB</option>
<option value="3">CC</option>
</select>
<input type="hidden" id="maingroup_value" />
<select id="subgroup">
<option value="1">DD</option>
<option value="2">EE</option>
<option value="3">FF</option>
</select>
<input type="hidden" id="subgroup_value" />
<select id="itemname">
<option value="1">GG</option>
<option value="2">HH</option>
<option value="3">II</option>
</select>
</span>
<span id='Table2'>
<input type="hidden" id="itemname_value" />
<select id="country">
<option value="1">JJ</option>
<option value="2">KK</option>
<option value="3">LL</option>
</select>
<input type="hidden" id="country_value" />
<select id="zone">
<option value="1">MM</option>
<option value="2">NN</option>
<option value="3">OO</option>
</select>
<input type="hidden" id="zone_value" />
<select id="state">
<option value="1">PP</option>
<option value="2">QQ</option>
<option value="3">RR</option>
</select>
<input type="hidden" id="state_value" />
<select id="city">
<option value="1">SS</option>
<option value="2">TT</option>
<option value="3">UU</option>
</select>
<input type="hidden" id="city_value" />
<select id="Areamanager">
<option value="1">XX</option>
<option value="2">YY</option>
<option value="3">ZZ</option>
</select>
<input type="hidden" id="Areamanager_value" />
<select name="outlet" id="outlet">
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
</select>
<input type="hidden" id="outlet_value" />
</span>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
function fun(s)
{
/* table 1 */
if(s == "maingroup")
{
$("#subgroup").val('');
$("#itemname").val('');
$("#subgroup_value").val('');
$("#itemname_value").val('');
$("#maingroup").show();
$("#subgroup").hide();
$("#itemname").hide();
}
<script>
For Using Jquery You'll need to import it in your page: 对于使用Jquery,您需要将其导入页面中:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
and your code'll be then: 然后您的代码将是:
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#id").val(null); // for setting value
$("#id").val(); //for getting value
#("#id").css({
"property":"value",
}); //for .style
});
<script>
Don't forget 别忘了
$(document).ready(function(){
//all js+Jquery.
});
Also you can use $(".class") instead of $("#id")
if classNames are also unique. 如果类名也是唯一的,也可以使用$(".class") instead of $("#id")
。
Instead of hide()
and show()
. 代替hide()
和show()
。
Use fadeOut('duration in millisecs')
, fadeIn('duration in millisecs')
it'll add some magic. 使用fadeOut('duration in millisecs')
, fadeIn('duration in millisecs')
会增加一些魔力。
and have a look at: This. 看看: 这个。
Hope it'll help you. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.