如果单选按钮被选中显示事业部

如果单选按钮被选中显示事业部

关注
发信
关注(28)粉丝(399)

如果单选按钮被选中显示事业部 - 8单选按钮/ 8的div - 这可以被简化？

本文介绍了如果单选按钮被选中显示事业部 - 8单选按钮/ 8的div - 这可以被简化？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

基本上，我想8单选按钮。以及如果选择一个无线电按钮，然后一个div如下所示。如果选择了另一个按钮另一个div所示。只有在每次显示一个分区，如果没有选择按钮（开始），则没有表现出的div。

这是我的HTML是相当标准，我并不想改善这个我需要的东西。

 ＆LT;形式ID ='组'＆GT;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM卡微BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM卡的微型BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM-MAXI-BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM-MEGA-BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=手机智能微BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=电话智能迷你BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=电话智能BTN/＆GT;＆LT; /标签＆gt;
    ＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=手机智能-MAXI-BTN/＆GT;＆LT; /标签＆gt;
＆LT; /表及GT;＆LT; D​​IV CLASS =billpay-互联网插件＆GT;
    ＆LT; D​​IV CLASS =SIM卡的微型桌面＆GT; SIM微型和LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =SIM-迷你台式机＆GT; SIM迷你＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =SIM-MAXI-桌面＆GT; SIM-MAXI＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =SIM-MEGA桌面＆GT; SIM-MEGA＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =手机智能微桌面＆GT;手机智能微＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =电话智能迷你台式机＆GT;手机智能迷你＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =手机智能桌面＆GT;手机智能＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =手机智能-MAXI-桌面＆GT;手机智能-MAXI＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

然而，这是我的脚本，它似乎相当繁忙，我不知道之前我谨是有办法做到这一点更简单？

  $（文件）。就绪（函数（）{
    $（'。SIM卡的微型桌面'）隐藏（）。
    $（'SIM-迷你台式机）隐藏（）。
    $（'SIM-MAXI-桌面'）隐藏（）。
    $（'。SIM卡的巨型桌面'）隐藏（）。
    $（'。手机智能微桌面'）隐藏（）。
    $（'。电话智能迷你台式机）隐藏（）。
    $（'。手机智能桌面）隐藏（）。
    $（'。手机智能-MAXI-桌面'）隐藏（）。
    $（'＃形式组'）。点击（函数（）{
        如果（'SIM微BTN'。$（）是（：勾选））{
            $（'。SIM卡的微型桌面）显示（）。
        }其他{
            $（'。SIM卡的微型桌面'）隐藏（）。
        }        如果（'SIM-迷你BTN'。$（）是（：勾选））{
            $（'SIM-迷你台式机）显示（）。
        }其他{
            $（'SIM-迷你台式机）隐藏（）。
        }        如果（$（'SIM-MAXI-BTN。'）是（：勾选））{
            $（'SIM-MAXI-桌面）显示（）。
        }其他{
            $（'SIM-MAXI-桌面'）隐藏（）。
        }        如果（'SIM-MEGA-BTN'。$（）是（：勾选））{
            $（'。SIM卡的巨型桌面）显示（）。
        }其他{
            $（'。SIM卡的巨型桌面'）隐藏（）。
        }        如果（$（'。手机智能微BTN）是（：勾选））{
            $（'。手机智能微桌面）显示（）。
        }其他{
            $（'。手机智能微桌面'）隐藏（）。
        }        如果（$（'。电话智能迷你BTN）是（：勾选））{
            $（'。电话智能迷你台式机）显示（）。
        }其他{
            $（'。电话智能迷你台式机）隐藏（）。
        }        如果（$（'。电话智能BTN）是（：勾选））{
            $（'。手机智能桌面）显示（）。
        }其他{
            $（'。手机智能桌面）隐藏（）。
        }        如果（$（）是（'手机智能-MAXI-BTN。'：勾选））{
            $（'。手机智能-MAXI-桌面）显示（）。
        }其他{
            $（'。手机智能-MAXI-桌面'）隐藏（）。
        }          }）;
}）;


解决方案

首先把共享类的无线按钮和 DIV 元件，其展示的内容。在我的例子我使用触发和内容分别。然后，数据属性添加到无线电识别哪些DIV应该点击显示。

缩短例如：

 ＆LT;形式ID ='组'＆GT;
    ＆LT;标签＆gt;
        ＆LT;输入类型=电台NAME =1组级=SIM卡微BTN触发数据相对=SIM卡的微型桌面/＆GT;
    ＆LT; /标签＆gt;
＆LT; /表及GT;
＆LT; D​​IV CLASS =billpay-互联网插件＆GT;
    ＆LT; D​​IV CLASS =SIM卡的微型桌面内容＆GT; SIM微型和LT; / DIV＆GT;
＆LT; / DIV＆GT;

然后你只需要点击一下处理程序是这样的：

  $（文件）。就绪（函数（）{
    $（'触发'）。点击（函数（）{
        $（'内容'）隐藏（）。
        $（+ $（本）。数据（'相对'）'。'）显示（）。
    }）;
}）;

您也可以再使用CSS来隐藏不jQuery的的 DIV 元素 - 造型应始终在CSS中完成，因为它是关注一个更好的分离。

  .content {
    显示：无;
}

Basically, I want 8 radio buttons. And if one radio button is selected then a div is shown below. If another button is selected another div is shown. Only one div shown at a time and if no button selected (initially) then no divs shown.

This is my HTML which is fairly standard, I'm not trying to improve this for what I need.

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label>
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

However this is my script and it seems fairly hectic and I'm wondering before I move on is there a way to do this a bit more simple?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }

          });


});
解决方案

Firstly put shared classes on both the radio buttons and the div elements which show the content. In my example I've used trigger and content respectively. Then add a data attribute to the radio to identify which div should be shown on click.

Shortened example:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

Then you only need 1 click handler like this:

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

You can also then use CSS to hide the div elements without jQuery - styling should always be done in CSS anyway as it's a much better separation of concerns.

.content {
    display: none;
}

Example fiddle

这篇关于如果单选按钮被选中显示事业部 - 8单选按钮/ 8的div - 这可以被简化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-06 20:59
Powered by LMLPHP ©2024 如果单选按钮被选中显示事业部 0.031295