javascript - 根据 4 个下拉选项显示特定内容

Question

我已经设法获取了一些代码来实现上述目标，但是，尽管进行了多次尝试，我还是无法让它工作。谁能帮我解决这个问题？

HTML 文件 HEAD 中的 JS:

    <script type="text/javascript"> 
        jQuery(function($){

        selects = $('#select-container select'),
        results = $('#results-container > div');

        selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        results.filter(values).show().siblings().hide();
        });

        });
    </script>

HTML 文件正文中的 HTML:

<div class="margins1"><h2>Goal</h2>
    <div id='select-container'>
<select>
<option value='none'>Select Option</option>
    <option value='Fat Loss'>Fat Loss</option>
    <option value='Lean Muscle'>Lean Muscle</option>
    <option value='Size & Mass'>Size & Mass</option>
    </select>
    <h2>Dietary Requirements</h2>
    <select>
    <option value='none'>Select Option</option>
        <option value='No Requirements'>No Requirements</option>
    <option value='Vegetarian'>Vegetarian</option>
    <option value='Vegan'>Vegan</option>
        <option value='Gluten Free'>Gluten Free</option>
            <option value='Gluten Free (vegetarian)'>Gluten Free (vegetarian)</option>
                <option value='Gluten Free'>Gluten Free (vegan)</option>
                    <option value='Dairy Free'>Dairy Free</option>
                        <option value='Dairy Free (vegetarian)'>Dairy Free (vegetarian)</option>
                        <option value='Dairy Free (vegan)'>Dairy Free (vegan)</option>
                        <option value='Nut Free'>Nut Free</option>
                                                <option value='Nut Free (vegetarian)'>Nut Free (vegetarian)</option>
                                                                        <option value='Nut Free (vegan)'>Nut Free (vegan)</option>
                                                                        <option value='Supplement Free'>Supplement Free</option>
                                                                        <option value='Supplement Free (vegetarian)'>Supplement Free (vegetarian)</option>
                                                                        <option value='Supplment Free (vegan)'>Supplement Free (vegan)</option>
                                                                        </select>
                                                                        <h2>Type of Day</h2>
                                                                        <select>
                                                                        <option value='none'>Select Option</option>
        <option value='Non-Back-Load Day (10-Day Prep/CNS)'>Non-Back-Load Day (10-Day Prep/CNS)</option>
    <option value='Back-Load Day (10-Day Prep/CNS)'>Back-Load Day (10-Day Prep/CNS)</option>
    <option value='Non-Back-Load Day (CBL)'>Non-Back-Load Day (CBL)</option>
    <option value='Back-Load Day (CBL)'>Back-Load Day (CBL)</option>
    </select>
    <h2>Cooking Level</h2>
    <select>
    <option value='none'>Select Option</option>
        <option value='Minimal Cooking'>Minimal Cooking</option>
    <option value='Moderate Cooking'>Moderate Cooking</option>
    <option value='Maximum Cooking'>Maximum Cooking</option>
    </select></br>

</div>

这是将下拉选择组合分配给一段文本的其余 HTML 代码。我只做过一个例子:

    <div class="margins2"><h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat Loss No Requirements Back-Load Day (CBL) Moderate Cooking'> IT WORKS</div>
  </div>

第二个 div 类有 4 个输入。没有逗号或单独的 '' 标记看起来很奇怪，但本教程不包含这些并且它有效。最后，这是我的外部 CSS 文件中的一些代码:

#results-container > div { display: none; }

任何人都可以帮助我解决没有文本显示的问题或确定为什么会发生这种情况吗？我想要实现的教程的 JSFiddle 链接可以在这里找到:http://jsfiddle.net/chnZP/

非常感谢

Answer 1

问题似乎在于下拉列表中的值是如何写入的。因为值直接用作类名，所以您在选择特殊字符时受到限制。

按照教程示例，如果您选择 alpha、blue 和 dog，脚本会将其转换为字符串 ”。 alpha.blue.dog" 然后使用 .filter() 选择包含这 3 个类名的元素方法。

因为字符串被发送给jQuery来管理它必须遵循严格的语法。这意味着您不能在类名中使用空格、反斜杠、括号(...等等)，因为它们会被不同地解析。

稍微修改代码即可修复。 http://jsfiddle.net/AjdHa/7/

<div id='select-container'>
    <select>
        <option value='none'>Select Option</option>
        <option value='Fat_Loss'>Fat Loss</option>
    </select>
    <h2>Dietary Requirements</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='No_Requirements'>No Requirements</option>
    </select>
    <h2>Type_of_Day</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='Non-Back-Load_Day_CBL'>Non-Back-Load Day (CBL)</option>
    </select>
    <h2>Cooking Level</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='Minimal_Cooking'>Minimal Cooking</option>
        <option value='Moderate_Cooking'>Moderate Cooking</option>
        <option value='Maximum_Cooking'>Maximum Cooking</option>
    </select>
</div>
<div class="margins2">
    <h1>Meal Plan...</h1>
    <div id='results-container'>
        <div class='Fat_Loss No_Requirements Non-Back-Load_Day_CBL Moderate_Cooking'>
            IT WORKS
        </div>
    </div>
</div>