如何减少Document.getelementbyid

Question

此处的代码包含大量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>

JSFIDDLE

Answer 1

 $("#subgroup,#itemname,#subgroup_value,#itemname_value").val('');
 $("#maingroup,#subgroup,#itemname").hide();

Answer 2

$('#sample-ID').val() ;

$('#sample-ID1').hide();

$('#sample-ID1').css('display','none');

Answer 3

好吧，这（现在更小）了（ 演示 ）

您可以使用以下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();
})

使用以下（清理过的）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>

Answer 4

<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>

Answer 5

对于使用Jquery，您需要将其导入页面中：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

然后您的代码将是：

<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>

别忘了

$(document).ready(function(){ 
//all js+Jquery.
});

如果类名也是唯一的，也可以使用$(".class") instead of $("#id") 。

代替hide()和show() 。

使用fadeOut('duration in millisecs') ， fadeIn('duration in millisecs')会增加一些魔力。

看看： 这个。

希望对您有帮助。