Question

我是javascript的新手，并提出了这个计数器这是JSFiddle - http://jsfiddle.net/ep6s616z/ 以下是javascript

我试图找出如何添加更多值，以便在计数器工具上达到20。它必须保持相同的大小，所以我怎么能实现这个目标？

新值会被隐藏并滑入吗？

任何帮助将不胜感激！

var pages = ["1", "2", "3", "4", "5", "6", "7", "8"];

$(document).ready(function () {
var num = 1;
updatePrice(num);});

function updatePrice(num) {
pages.forEach(function(entry) {

if (entry == num) {
     document.getElementById(entry).className = "page-selected page";
    }
    else {
        document.getElementById(entry).className = "page";
        }

        document.getElementById('circle').innerHTML = num });   

}


function addOne() {
var current = document.getElementsByClassName('page page-selected')[0].id

if (current < 8) {
    current++;
    updatePrice(current);
    }
}


function takeOne() {
var current = document.getElementsByClassName('page page-selected')[0].id
if (current > 1) {
    current--;
    updatePrice(current);
    }
}

Answer 1

我做了一个完整的重写，因为事件在纯jQuery中更清晰。我还添加了一个额外的div来允许你想要的滚动：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/ep6s616z/18/

更简单的HTML：

<div id="circle">1</div>
<div id="calculator">
    <div id="slider-left">-</div>
    <div id="slider">
        <div id="page-holder"></div>
    </div>
    <div id="slider-right">+</div>
</div>

代码：

// Generate n items
for (var i = 1; i <= 20; i++) {
    $('#page-holder').append($('<div>').addClass('page').text(i));
}

// Outer slider - allows for scroller
var $slider = $('#slider');

// Actual page holding div
var $pageHolder = $('#page-holder');

// Listen for clicks on any .page divs
$pageHolder.on('click', 'div.page', function (e) {
    var $div = $(this);
    $('#page-holder .page').removeClass('page-selected');
    $div.addClass('page-selected');
    $('#circle').html($div.html());
    // Ensure the element is visible - of not scrill it into view
    var offset = $div.offset();

    // Range of the visible area
    var areaStart = $slider.scrollLeft();
    var areaEnd = areaStart + $slider.width();
    var x = ($div.index() + 1) * $div.outerWidth();
    if (offset.left > areaEnd)
    { 
        $slider.animate({scrollLeft: x}, 100);
    }
    else if (offset.left < areaStart)
    {
        $slider.animate({scrollLeft: x-$div.width()}, 100);
    }
});

$('#slider-right').click(function () {
    var $div = $('#page-holder .page-selected');
    if (!$div.length) {
        $div = $('#page-holder .page:first');
    } else {
        $div = $div.next();
    }
    $div.trigger('click');
});

$('#slider-left').click(function () {
    var $div = $('#page-holder .page-selected');
    if (!$div.length) {
        $div = $('#page-holder .page').last();
    } else {
        $div = $div.prev();
    }
    $div.trigger('click');
});

注意：滚动以保持视野并不完美，因为范围检查不太正确，但你需要做点什么。：）

Answer 2

我想这就是你想要的。我添加了一个按钮控件，用于在滑块上添加更多限制。

HTML代码

<input id="add" name="addmore" type="button" value="AddMore" />

Jquery代码：

   $('#add').on('click', function () {
      var divEle = '<div onClick="updatePrice(this.id)" id="' + count + '" class="page">' + count + '</div>';
      $('#calculator').width($('#calculator').width() + sizeCounter);
      $('#page-holder').width($('#page-holder').width() + sizeCounter);
      $('#page-holder').append(divEle);
      pages[count - 1] = count;
      count++;
      if (count == 10) sizeCounter += 4;
  });

现场演示： http://jsfiddle.net/dreamweiver/ep6s616z/23/

快乐编码：）

Javascript Counter - 如何添加更多值

2 个答案: