如何使jQuery从.each迭代一次只输出一个值

Question

我有以下从CodePen 派生的 jQuery 条件代码。我已经扩展了代码以使用选择字段并且一切正常，除了当我在data-cond-val 中使用多个值时，jQuery 输出所有值并且只执行最后一个值。

例如在下面提供的代码中，当我使用data-cond-val="no, maybe" 时，只有值可能会在事件更改时使用/执行，无论是用于选择选项、输入检查还是输入单选。

这是 HTML 代码

<div id="demo">         
            <select name="" data-cond="example1">
                <option name="example1" data-cond="example1" value="yes">Yes</option>
                <option name="example1" data-cond="example1" value="no">No</option>
                <option name="example1" data-cond="example1" value="maybe">Maybe</option>
            </select>

        <div class="conditional" data-cond-opt="example1" data-cond-val="yes">
            <label><input type="checkbox" name="example2" data-cond="example2"><span></span> Are you sure?</label>
            <label><input type="checkbox" name="example3" data-cond="example3"><span></span> Really super sure?</label>
            <div class="conditional" data-cond-opt="example2" data-cond-val="on">
                Hooray!
            </div>
            <div class="conditional" data-cond-opt="example3" data-cond-val="on">
                Don't get cocky!
            </div>
        </div>

        <div class="conditional" data-cond-opt="example1" data-cond-val="no, maybe">
            <p>
                That's a shame. Will you change your mind?
            </p>
            <label><input type="radio" name="example4" data-cond="example4" value="yes"><span></span> Yes</label>
            <label><input type="radio" name="example4" data-cond="example4" value="no"><span></span> No</label>
            <label><input type="radio" name="example4" data-cond="example4" value="maybe"><span></span> Maybe</label>
            <div class="conditional" data-cond-opt="example4" data-cond-val="yes">
                Great!
            </div>
            <div class="conditional" data-cond-opt="example4" data-cond-val="no, maybe">
                Maybe
            </div>
        </div>
    </div>
    <script>
     $('.conditional').conditionize();
    </script>

这里是 jQuery 代码

(function($) {
    $.fn.conditionize = function(options){
        var settings = $.extend({
            hideJS: true
        }, options );

        $.fn.showOrHide = function(listenTo, listenFor, $section) {
            //checkbox and radio input types
            if ($(listenTo + ":checked").val() == listenFor) {
                $section.slideDown();
            } 
            // select box   
            else if ($(listenTo + "option:selected").val() == listenFor) {
                $section.slideDown();
            } else {
                $section.slideUp();
            }
        }

        return this.each( function() {

            var listenTo = "[data-cond=" + $(this).data('cond-opt') + "]";

            // check if data att has multiple values
            var multiVals = $(this).data('cond-val').split(' ').join(',');          
            var len = multiVals.indexOf(',');

            // if data att has multiple values
            if ( len > 0 ) {

                // create an array from the values
                var dataVals = $(this).data('cond-val').split(' ');

                var listenFor;

                $.each(dataVals, function (i, dataVal) {
                    listenFor = dataVals[i];
                });

            } else {
                var listenFor = $(this).data('cond-val');
            }

            var $section = $(this);

            //Set up event listener
            $(listenTo).change(function() {
                $.fn.showOrHide(listenTo, listenFor, $section);
            });

            //If setting was chosen, hide everything first...
            if (settings.hideJS) {
                $(this).hide();
            }

            //Show based on current value on page load
            $.fn.showOrHide(listenTo, listenFor, $section);
        });
    }
}(jQuery));

问题：如何让 jQuery 在每个事件更改时分别获取多个值中的每一个？

我不确定我的语法有什么问题！如果有人可以通过向我展示如何使其工作来帮助我，我会很高兴。

这是我的 CodePen 分叉 DEMO - http://codepen.io/peter2015/pen/ZGoJom

在我上面的演示中，当您选择 No 和 Maybe 时，它们应该都输出相同的部分，但只有 Maybe 选项显示部分和 No 选择时不显示任何内容。

Answer 1

对此不确定：var multiVals = $(this).data('cond-val').split(' ').join(',');。

一个拆分就足够了var multiVals = $(this).data('cond-val').split(',');

或者var multiVals = $(this).data('cond-val').replace(/ /g,'').split(',');，如果你想去掉属性中的空格。

http://jsfiddle.net/pwjrev9v/