Question

在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一起工作，管理单选按钮点击显示销售创建表单。所以有人可以告诉我如何解决这个问题，以便当有人点击销售管理单选按钮时，它应该只显示管理部分，有人会点击创建销售，然后它将显示销售创建表格。任何帮助和建议都会非常明显。感谢

Answer 1

您可以相应地测试哪个单选按钮以及.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() optionally accepts a boolean指示是否显示或隐藏的事实：

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/

Answer 2

使用'更改'代替'点击'

//在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();
    });
  });

点击单选按钮上的jQuery应该显示特定的div

2 个答案: