这是HTML代码

Question

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

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

这是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

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

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/

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

这是HTML代码

这是jQuery代码

1 个答案: