Question

我遇到了jQuery脚本的开发问题。我试图找到一些可以重新定位的东西，但却找不到我需要的东西。所以我开始写一些东西，但还没有让它正常工作，我是一个新手，我似乎无法弄明白。

我试图获得2个单选按钮（第一个分组为3，第二个分组为2），在选择两个单选按钮时返回6个div标签中的1个。

我只为销售或支持选项的临床编写了足够的脚本。

HTML：

<div class="input-quest">Question 1</div>
<div id="optSelectBU">
    <input type="radio" name="button1" value="clinical" />
    <label>Clinical</label>
    <input type="radio" name="button1" value="financial" />
    <label>Financial</label>
    <input type="radio" name="button1" value="pharmacy" />
    <label>Pharmacy</label>
</div>
<div class="input-quest">Question 2</div>
<div id="optSelectService">
    <input type="radio" name="button2" value="support" />
    <label>Support</label>
    <input type="radio" name="button2" value="sales" />
    <label>Sales</label>
</div>
<div id="Clinical-Support">
    <div class="block">
        <div class="input-quest">Div 1</div>
    </div>
</div>
<div id="Clinical-Sales">
    <div class="block">
        <div class="input-quest">Div 2</div>
    </div>
</div>
<div id="Financial-Support">
    <div class="block">
        <div class="input-quest">Div 3</div>
    </div>
</div>
<div id="Financial-Sales">
    <div class="block">
        <div class="input-quest">Div 4</div>
    </div>
</div>
<div id="Pharmacy-Support">
    <div class="block">
        <div class="input-quest">Div 5</div>
    </div>
</div>
<div id="Pharmacy-Sales">
    <div class="block">
        <div class="input-quest">Div 6</div>
    </div>
</div>

脚本：

$(document).ready(function () {
    $("#Clinical-Support").hide();
    $("#Clinical-Sales").hide();
    $("#Financial-Support").hide();
    $("#Financial-Sales").hide();
    $("#Pharmacy-Support").hide();
    $("#Pharmacy-Sales").hide();

    $("#optSelectBU").change(function () {
        if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
            $("#Clinical-Sales").show();
        } else {
            $("#Clinical-Support").hide();
            $("#Clinical-Sales").hide();
            $("#Financial-Support").hide();
            $("#Financial-Sales").hide();
            $("#Pharmacy-Support").hide();
            $("#Pharmacy-Sales").hide();
        }
    });
    $("#optSelectBU").change(function () {
        if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
            $("#Clinical-Support").show();
        } else {
            $("#Clinical-Support").hide();
            $("#Clinical-Sales").hide();
            $("#Financial-Support").hide();
            $("#Financial-Sales").hide();
            $("#Pharmacy-Support").hide();
            $("#Pharmacy-Sales").hide();
        }
    });
});

这是小提琴链接： http://jsfiddle.net/schoward30506/LV5nQ/3/

Answer 1

它不漂亮，但如果你使用data-attributes而不是id，那么你可以大规模简化你的代码：

$(document).ready(function () {    
    $("div[data-cats]").hide();    
    $("input[name=button1], input[name=button2]").change(function () {
        var b1 = $('input[name=button1]:checked').val();
        var b2 = $('input[name=button2]:checked').val();
        $("div[data-cats]").hide();        
        $("div[data-cats='"+b1+" "+b2+"']").show();       
    });
});

http://jsfiddle.net/LV5nQ/6/

Answer 2

我摆弄着并找到了这个解决方案。请记住，我在你不断变化的div中添加了一个div＃容器。

http://jsfiddle.net/honk1/LV5nQ/10/

$(document).ready(function () {
$("#container > div").hide();

var input1, input2;

function checkboxChecker() {
    if ( input1 === "clinical" && input2 === "sales" ) {
        $("#Clinical-Sales").show().siblings("div").hide();
    } else if ( input1 === "clinical" && input2 === "support" ) {
        $("#Clinical-Support").show().siblings("div").hide();
    } else {
        $("#container > div").hide();
    }
};

$("input[name=button1], input[name=button2]").change(function () {
    input1 = $('input[name=button1]:checked').val();
    input2 = $('input[name=button2]:checked').val();
    checkboxChecker();
});
});

如何获得2个单选按钮选择以在jquery中显示1个div

2 个答案: