如何使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/