Question

所以我试图在jquery中为我创建的样式指南编写一个可重用的函数。该函数的目标是根据范围滑块的值隐藏/显示多个div。

html代码如下所示

var primarySlider = $(".primary-slider");
var primaryColorContainer = $(".primary-colors .color");
var primaryValue = $('.primary-range-container .value');

$.fn.colorBlocks(colorContainer, rangeSlider) {
    this.change(function() {
        var number = $(rangeSlider).val();
        $(colorContainer).hide();
        $(colorContainer).hide().slice( 0, number ).show();
    }
    this.change();
}

primarySlider.colorBlocks(primaryColorContainer, primaryValue);

javascript代码看起来像这样

Parsing error: Unexpected Token {

我头脑中的预期结果是该函数可以正常工作，但到目前为止，我没有看到任何内容，而是编译器给了我"\t", "\n"。

任何建议或更好的方法都会非常有用。

Answer 1

您的语法有几个问题。

您定义原型的位置：

$.fn.colorBlocks(colorContainer, rangeSlider) {

应该是：

$.fn.colorBlocks = function(colorContainer, rangeSlider) {

并且您错过了在更改侦听器中打开的右括号：

this.change(function() {
...
};

应该是：

this.change(function() {
...
});

错误来自这样一个事实：由于定义原型时语法不正确，它在到达之前到达了大括号。

修复示例：

＆＃13;

var primarySlider = $(".primary-slider");
var primaryColorContainer = $(".primary-colors .color");
var primaryValue = $('.primary-range-container .value');

$.fn.colorBlocks = function(colorContainer, rangeSlider, primaryValue) {
  this.change(function() {
    var number = $(rangeSlider).val();
    $(primaryValue).text(number);
    $(colorContainer).hide();
    $(colorContainer).hide().slice( 0, number ).show();
  });
  this.change();
}

primarySlider.colorBlocks(primaryColorContainer, primarySlider, primaryValue);

＆＃13;

div.color {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background: red;
  margin: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="primary-colors">
 <h3>Primary Colors</h3>
 <div class="primary-range-container">
  <input type="range" min="1" max="15" value ="5" class="primary-slider">
  <span class="value">5</span>
 </div>
 <hr>
 <div class="color-container">
  <div class="color primary-color-1"></div>
  <div class="color primary-color-2"></div>
  <div class="color primary-color-3"></div>
  <div class="color primary-color-4"></div>
  <div class="color primary-color-5"></div>
  <div class="color primary-color-6"></div>
  <div class="color primary-color-7"></div>
  <div class="color primary-color-8"></div>
  <div class="color primary-color-9"></div>
  <div class="color primary-color-10"></div>
  <div class="color primary-color-11"></div>
 </div>
</div>

＆＃13;

Answer 2

请试试这个JS

    var primarySlider = $(".primary-slider");
    var primaryColorContainer = $(".primary-colors .color");
    var primaryValue = $('.primary-range-container input');
    var primaryValueDisplay = $('.primary-range-container .value');


    $.fn.colorBlocks = function(colorContainer, rangeSlider) {
        this.change(function() {
            var number = $(rangeSlider).val();
            $(colorContainer).hide();
            $(colorContainer).hide().slice(0, number).show();
            primaryValueDisplay.html(number)

        })
        this.change();
    }

    primarySlider.colorBlocks(primaryColorContainer, primaryValue);

Answer 3

发现其他内部错误：我认为这就是你想要做的事情：

JS Fiddle demo

HTML：

<div class="primary-colors">
   <h3>Primary Colors</h3>
   <div class="primary-range-container">
    <input type="range" min="1" max="15" value ="5" class="primary-slider">
    <span id="sliderValue" class="value">0</span>
   </div>

   <div class="color-container">
    <div class="color primary-color-1">1</div>
    <div class="color primary-color-2">2</div>
    <div class="color primary-color-3">3</div>
    <div class="color primary-color-4">4</div>
    <div class="color primary-color-5">5</div>
    <div class="color primary-color-6">6</div>
    <div class="color primary-color-7">7</div>
    <div class="color primary-color-8">8</div>
    <div class="color primary-color-9">9</div>
    <div class="color primary-color-10">10</div>
    <div class="color primary-color-11">11</div>
  </div>
</div>

JS

var primarySlider = $(".primary-slider");
var primaryColorContainer = $(".primary-colors .color");
var primaryValue = $('.primary-range-container .value');

$.fn.colorBlocks = function(colorContainer, rangeSlider) {
  this.change(function() {
    var number = $(rangeSlider).val();
    //$(colorContainer).hide();
    $(colorContainer).each(function(i1,obj) {
     if(i1 < number){
        $(this).hide();
     }
     else $(this).show();
 });
  });
  this.change();
}

primarySlider.colorBlocks(primaryColorContainer, primarySlider);

我为你留下了一个Id来更新滑块的值（右边的数字），可选的隐藏评论，如果你愿意，可以重新打开

Answer 4

你有语法错误。功能应定义为 this.change(function() { ... });。

var primarySlider = $(".primary-slider"); var primaryColorContainer = $(".primary-colors .color"); var primaryValue = $('.primary-range-container .value'); $.fn.colorBlocks = function(colorContainer, rangeSlider) { this.change(function() { var number = $(rangeSlider).val(); $(colorContainer).hide(); $(colorContainer).hide().slice( 0, number ).show(); }); this.change(); } primarySlider.colorBlocks(primaryColorContainer, primaryValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="primary-colors">
 <h3>Primary Colors</h3>
 <div class="primary-range-container">
  <input type="range" min="1" max="15" value ="5" class="primary-slider">
  <span class="value">0</span>
 </div>
 <hr>
 <div class="color-container">
  <div class="color primary-color-1"></div>
  <div class="color primary-color-2"></div>
  <div class="color primary-color-3"></div>
  <div class="color primary-color-4"></div>
  <div class="color primary-color-5"></div>
  <div class="color primary-color-6"></div>
  <div class="color primary-color-7"></div>
  <div class="color primary-color-8"></div>
  <div class="color primary-color-9"></div>
  <div class="color primary-color-10"></div>
  <div class="color primary-color-11"></div>
 </div>
</div>

onCreate

Answer 5

要使用jQuery创建原型，请指定一个函数

$.fn.colorBlocks = function (colorContainer, rangeSlider) {
   //code here
}

jquery函数意外令牌错误

5 个答案: