jquery切換li基於data-max和data-min驗證消息

Question

• 我希望能夠選擇一個圖像（li），選擇項的數量取決於data-max和data-min on（主要格）

在所選擇的功能，我在刪除列表中的項目的檢查狀態，並選擇類問題

所以它的工作，直到我選擇最上面的一個那麼它就會犯糊塗 我需要將驗證更改爲僅返回true或false

DEMO http://jsfiddle.net/XeELs/346/

JS

(function() { 

    var mobileForms = (function() { 

     return { 

      model: { 
       selection: { 
        validate: { 
         test: function (e) { 
          var that = this, 
           modelSelector = $('.divModelOptions'), 
           chosen = $('input:checked', modelSelector), 
           messages = $('.message', modelSelector), 
           minMessage = $('.min', modelSelector), 
           maxMessage = $('.max', modelSelector); 


          if (typeof (that.messageDisplayTime) !== 'undefined') clearTimeout(that.messageDisplayTime); 
          if (chosen.length >= that.min && chosen.length <= that.max) { 
           messages.slideUp(200); 
           return true; 
          } else if (chosen.length > that.max) { 

           if (that.max > 1) { 
            maxMessage.slideDown(400, function() { 
             that.messageDisplayTime = setTimeout(function() { 
              maxMessage.slideUp(200); 
             }, 3000); 
            }); 

            if (typeof (e) !== 'undefined') e.preventDefault(); 
            return false; 
           } else { 
            chosen[0].checked = false; 
            chosen.parents('li').removeClass('selected'); 
            return true; 
           } 

          } else { 
           minMessage.slideDown(400); 

           return 'fail'; 
          } 
         }, 
         init: function() { 
          var modelSelector = $('.divModelOptions'), 
           html = ''; 

          this.min = parseInt(modelSelector.attr('data-min'), 10); 
          this.max = parseInt(modelSelector.attr('data-max'), 10); 

          html = '\ 
           <ul class="validation">\ 
            <li class="message min">' + modelSelector.attr('data-min-msg') + '</li>\ 
            <li class="message max">' + modelSelector.attr('data-max-msg') + '</li>\ 
           </ul>'; 

          modelSelector.prepend(html); 
         } 
        }, 
        bindHandlers: function() { 
         var that = this, 
          modelSelector = $('.divModelOptions'), 
          chosen = $('input:checked', modelSelector); 
         var max = parseInt(modelSelector.attr('data-max'), 2); 

         $('input', modelSelector).click(function (e) { 
          var parent = $(this).parents('li'); 

          if (that.validate.test(e)) { 
           if (parent.hasClass('selected')) { 
            parent.removeClass('selected'); 
           } else { 
            parent.addClass('selected'); 
           } 
          } 
         }); 

         if (chosen.length) { 
          chosen.parents('li').addClass('selected'); 
          that.validate.test(); 
         } 

         $('form').submit(function (e) { 
          if (!that.validate.test() || that.validate.test() === 'fail') e.preventDefault(); 
         }); 
        }, 
        init: function() { 
         this.validate.init(); 
         this.bindHandlers(); 
        } 
       }, 
       nextButton: { 
        bindHandlers: function (button) { 
         button.one('click', function() { 
          mobileForms.showNextStep(); 
         }); 
        }, 
        create: function() { 
         var nextCommandText = $('.divModelOptions').data('nextcommand'); 

         // TODO: Next button should start off grey and become blue once a model is selected. 
         var button = $('<input type="button" value="' + nextCommandText + '" class="next-button">'); 

         $('.divModelOptions').append(button); 
         this.bindHandlers(button); 
        }, 
        init: function() { 
         this.create(); 
        } 
       }, 
       init: function() { 
        this.selection.init(); 
        this.nextButton.init(); 
       } 
      }, 
      validation: { 
       focusOnError: function (messages) { 
        var message = $(messages[0]); 
        $('html, body').animate({ 
         scrollTop: message.offset().top - 100 
        }, 500); 
       }, 
       init: function() { 
        var visibleMessages; 
        $('form').submit(function() { 
         visibleMessages = $('.validation-message:visible, .validation .message:visible'); 
         if (visibleMessages.length) { 
          mobileForms.validation.focusOnError(visibleMessages); 
         } 
        }); 
       } 
      }, 
      init: function() { 
       this.model.init(); 
       this.validation.init(); 
      } 
     }; 

    })(); 

    $(function() { 
     mobileForms.init(); 
    }); 

})(); 

Answer 1

有問題的代碼是相當困難的遵循有很多的是不是真正的問題的一部分功能。錯誤消息元素自動隱藏也令人困惑，特別是因爲多次點擊可以附加多個setTimeout()函數。

它有助於看看通過設置你的CSS爲發生的事情：

.divModelOptions input { 
    display: block; 
} 

只出現問題的時候，因爲else替代data-min="1"和data-max="1"：

if (that.max > 1) { 
} else { 
    chosen[0].checked = false; 
    chosen.parents('li').removeClass('selected'); 
    return true; 
} 

這是自that.max === 1進入所以點擊的項目總是會導致第一個<input>的已檢查屬性被設置爲false，無論哪個項目被點擊，然後全部<li>父母已將selected類刪除。但是，由於您的條件滿足，因此調用代碼邏輯if條件成立。

if (that.validate.test(e)) { 
    if (parent.hasClass('selected')) { 
     parent.removeClass('selected'); 
      //remove check status to input 
    } else { 
     parent.addClass('selected'); 
     //add check status to input 
    } 
} 

它增加了selected類到新選擇的<li>。

請注意，您會得到不同的不一致行爲，具體取決於第一個<li>選擇的是第一個選定的行爲。如果您首先選擇了2 ^和,第或第4 ^第。

我試圖減少我的答案中的代碼，以解決顯示消息的問題，如果所選項目的數量低於或超過定義的範圍。所以它可能並不完全是你以後的事情，但它應該是一個（希望）更簡單的地方開始。

jsFiddle demo

的JavaScript

(function() { 
    var mobileForms = (function() { 
     return { 
      model: { 
       selection: { 
        validate: { 
         inRange: function (e) { 
          var self = this, 
           chosen = $('input:checked', self.modelSelector), 
           minMessage = $('.min', self.modelSelector), 
           maxMessage = $('.max', self.modelSelector); 

          if (chosen.length === 0 || (chosen.length >= self.min && chosen.length <= self.max)) { 
           self.validation.slideUp(200); 
          } else { 
           maxMessage.toggle(chosen.length > self.max); 
           minMessage.toggle(chosen.length < self.min); 
           self.validation.slideDown(400); 
          } 

          return chosen.length <= self.max; 
         }, 
         init: function() { 
          this.modelSelector = $('.divModelOptions'); 
          this.validation = $('.validation', this.modelSelector); 
          this.min = parseInt(this.modelSelector.data('min'), 10); 
          this.max = parseInt(this.modelSelector.data('max'), 10); 
          this.validation.slideUp(); 

          $('.min span').text(this.min); 
          $('.max span').text(this.max); 
         } 
        }, 
        bindHandlers: function() { 
         var self = this; 

         $('input', this.modelSelector).click(function (e) { 
          var parent = $(this).closest('li'); 
          parent.toggleClass('selected'); 
          if (!self.validate.inRange()) { 
           parent.removeClass('selected'); 
           return false; // stop checkbox receiving event 
          } 
         }); 
        }, 
        init: function() { 
         this.validate.init(); 
         this.bindHandlers(); 
        } 
       }, 
       init: function() { 
        this.selection.init(); 
       } 
      }, 
      init: function() { 
       this.model.init(); 
      } 
     }; 

    })(); 

    $(function() { 
     mobileForms.init(); 
    }); 
})(); 

和用於完整性＆hellip;

CSS（相同的質疑）

.divModelOptions input { 
    cursor: pointer; 
    display: none; 
    float: left; 
} 
.divModelOptions label { 
    cursor: pointer; 
} 
.divModelOptions li.selected { 
    border:1px solid red 
} 
.divModelOptions .validation li { 
    display: none; 
} 

HTML（有數據-MAX和數據分鐘玩玩看不同的例子）

<div data-max="2" data-min="2" class="divModelOptions"> 
    <ul class="validation"> 
     <li class="message min">At least <span></span> should be selected</li> 
     <li class="message max">No more than <span></span> should be selected</li> 
    </ul> 
    <ul> 
     <li> 
      <label> 
       <img alt="" src="http://placehold.it/30x30" /> 
       <input type="checkbox" id="Model" value="Model" name="Model" /><span rel="Model">Model</span> 
      </label> 
     </li> 
     <li> 
      <label> 
       <img alt="" src="http://placehold.it/30x30" /> 
       <input type="checkbox" id="Model2" value="Model2" name="Model2" /><span rel="Model2">Model2</span> 
      </label> 
     </li> 
     <li> 
      <label> 
       <img alt="" src="http://placehold.it/30x30" /> 
       <input type="checkbox" id="Model3" value="Model3" name="Model3" /><span rel="Model3">Model3</span> 
      </label> 
     </li> 
     <li> 
      <label> 
       <img alt="" src="http://placehold.it/30x30" /> 
       <input type="checkbox" id="Model4" value="Model4" name="Model4" /><span rel="Model3">Model4</span> 
      </label> 
     </li> 
    </ul> 
</div>