如何使jQuery每次只输出一个值，每次迭代

Question

我有以下jQuery条件代码，我从CodePen分叉。我已经扩展了代码以使用选择字段，并且一切正常，除了当我在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

在我的演示上面，当你选择没有和也许，他们应该都输出相同的部分，但只也许选项显示部分和否选择时不显示任何内容。

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/