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

好吧这个（现在更小）（demo）

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

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

取代hide()和show()。

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

并查看：This.

希望它能帮到你。

如何减少Document.getelementbyid

5 个答案: