0

在 html 标记中是这样的

<div id="sales-menu-wrp">
    <div class="radio-buttons-wrap">
      <input type="radio" id="create_sales" name="toggler"/>Create Sales 
      <input type="radio" id="manage-sales" name="toggler" checked="checked" /> Manage Sales
    </div><!--.radio-buttons-wrap-->
  <div id="sales-details-form"  style="display:none;" >
    <div class="sales-product-details-wrap">
      <table id="sales-details-heading">
        <tr>
          <th>Products</th>
          <th>Description</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Discount Type</th>
          <th>Discount Price</th>
          <th>Price</th>
        </tr>
      </table>
      <table id="sales-product-details">
        <tr>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
        </tr>
      </table><!--#sales-product-detail-->

    </div><!--.sales-product-details-wrap-->
    </div><!--#sales-details-form-->
    <div id="sales-details-managment" style="" >
      <div class="managment-header">
        <ul>
          <li>Store Name</li>
          <li>Store Location</li>
          <li>Store Code</li>
          <li>Products</li>
        </ul>
      </div>
      <table class="sales-total-desc">
        <tr>
          <td>store test</td>
          <td>store test</td>
          <td>store test</td>
          <td>store test</td>
        </tr>
      </table>         
    </div><!--#sales-details-managment-->
  </div><!--#sales-menu-wrap-->

在这里你可以看到我有两个radio buttons. 一种是Create Sales指当一个人单击该按钮时将显示create sales form，另一种是指单击该按钮时将Sales Managment显示managment section。所以最后我希望当有人访问该页面时，它会显示sales managment section并且默认情况下将隐藏销售创建表单。所以对于所有我只是使用这样的jQuery代码

jQuery(document).ready(function() {
  jQuery("input:radio").click(function(){
    $('#sales-details-form').toggle(); 
    $('#sales-details-managment').toggle(); 
  });
});

它在这里工作，但是当有人刷新页面时，销售创建按钮与管理 div 一起使用，单击时管理单选按钮显示销售创建表单。所以有人可以告诉我如何解决这个问题，这样当一些人点击销售管理单选按钮时，它应该只显示管理部分，有人会点击创建销售，然后它会显示销售创建表单。任何帮助和建议都将是非常可观的。谢谢

4

2 回答 2

3

您可以测试单击了哪个单选按钮，.hide()或.show()相应地：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        if (this.id === "create_sales") {
            $('#sales-details-form').show();
            $('#sales-details-managment').hide();
        } else {
            $('#sales-details-form').hide();
            $('#sales-details-managment').show();
        }
    });
});

演示：http: //jsfiddle.net/Cx5rH/

或者，对于更紧凑的代码，您可以利用.toggle()可选择接受指示是否显示或隐藏的布尔值的事实：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        var isCreate = (this.id === "create_sales");
        $('#sales-details-form').toggle(isCreate);
        $('#sales-details-managment').toggle(!isCreate);
    });
});

演示：http: //jsfiddle.net/Cx5rH/1/

于 2013-07-17T12:16:27.650 回答
1

使用“更改”而不是“点击”

//设置不显示而sales-details-managment不是' sales-details-form'

<div id="sales-details-managment" style="display:none;" >

Java脚本代码：

$(document).ready(function () {
    $("#manage-sales").trigger('click');
    $("input:radio").change(function () {
        $('#sales-details-form, #sales-details-managment').toggle();
    });
  });
于 2013-07-17T12:15:44.267 回答