Question

因缺乏javascript知识而提前道歉。

我有两组无线电输入字段，“状态”组和“结构”组。有4个定价结构，每个州的每个定价结构都不同。

我希望用户选择他们的州和他们的首选定价结构，以显示具有相关定价信息的div。我还希望用户能够轻松地在状态和结构之间切换以比较价格。

我在这里有点工作：http://jsfiddle.net/HCreate/L6srku90/ 但是，我认为这是一个非常冗长的解决方案。在状态和结构之间切换的能力不能很好地工作，因为如果选择不同的状态，则需要重新选择结构，这是不理想的。

我试图在这里创建更简化的内容：http://jsfiddle.net/HCreate/65t6mnd5/ 但是我无法让它发挥作用。我甚至不确定这是实现这一目标的最佳方法。

HTML

<p><strong>What State</strong></p>
        <input type="radio" name="groupa" class="wa state" value="wa"/> WA
        <input type="radio" name="groupa" class="nt state" value="nt"/> NT
        <input type="radio" name="groupa" class="sa state" value="sa"/> SA
        <input type="radio" name="groupa" class="qld state" value="qld"/> QLD
        <input type="radio" name="groupa" class="nsw state" value="nsw"/> NSW
        <input type="radio" name="groupa" class="vic state" value="vic"/> VIC
        <input type="radio" name="groupa" class="tas state" value="tas"/> TAS

<p><strong>What Structure</strong></p>
        <input type="radio" name="groupb" class="S1 structure" value="S1"/> Structure 1
        <input type="radio" name="groupb" class="S2 structure" value="S2"/> Structure 2
        <input type="radio" name="groupb" class="S3 structure" value="S3" /> Structure 3
        <input type="radio" name="groupb" class="S4 structure" value="S4"/> Structure 4

<p>&nbsp;</p>

    <div class="waS1 content"><p>WA Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="waS2 content"><p>WA Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="waS3 content"><p>WA Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="waS4 content"><p>WA Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="ntS1 content"><p>NT Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="ntS2 content"><p>NT Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="ntS3 content"><p>NT Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="ntS4 content"><p>NT Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="saS1 content"><p>SA Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="saS2 content"><p>SA Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="saS3 content"><p>SA Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="saS4 content"><p>SA Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="qldS1 content"><p>QLD Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="qldS2 content"><p>QLD Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="qldS3 content"><p>QLD Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="qldS4 content"><p>QLD Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="nswS1 content"><p>NSW Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="nswS2 content"><p>NSW Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="nswS3 content"><p>NSW Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="nswS4 content"><p>NSW Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="vicS1 content"><p>VIC Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="vicS2 content"><p>VIC Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="vicS3 content"><p>VIC Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="vicS4 content"><p>VIC Structure 4</p><p><em>Pricing Table</em></p></div>

    <div class="tasS1 content"><p>TAS Structure 1</p><p><em>Pricing Table</em></p></div>
    <div class="tasS2 content"><p>TAS Structure 2</p><p><em>Pricing Table</em></p></div>
    <div class="tasS3 content"><p>TAS Structure 3</p><p><em>Pricing Table</em></p></div>
    <div class="tasS4 content"><p>TAS Structure 4</p><p><em>Pricing Table</em></p></div>

SCRIPT

function() {
    $('.content').hide();
    if ('.state').checked = true;
    $('.'+$('.state').val()+$('.structure').val()).show();
}

CSS

.content {
    display: none;
}

非常感谢任何帮助。干杯！

Answer 1

您的代码无法正常工作，因为您需要为自己的功能命名并且不会触发任何事件你的代码。

我会这样想，只是为了给你和想法：

$('input[name="groupb"]').click(function(){

  if($('input[name="groupa"]').is(':checked'))
      $('.'+$('.state:checked')+$('.structure:checked').val()).show();

})

单选按钮选择以显示特定div

1 个答案: