Встречное Javascript - Как добавить больше значений

Я новичок в яваскрипт и придумали с этим счетчиком Вот это JSFiddle - http://jsfiddle.net/ep6s616z/ и ниже является JavascriptВстречное 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); 
    } 
}

источник

2014-09-18 Ned

Не могли бы вы проверить, действительно ли это последний видимый номер и стрелка? Затем просто увеличивайте все числа, чтобы они выглядели как сдвинутые. – Grice

Примечание: вам не нужны все отдельные обработчики атрибутов onClick с jQuery. Вы можете получить тот же эффект, используя один обработчик, прикрепленный jQuery. Гораздо чище/проще. –

Я сделал полную перезапись, поскольку события намного чище в чистом jQuery. Я также добавил дополнительный DIV, чтобы позволить прокрутки вы хотели:

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

Simpler 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'); 
});

Примечание: скроллинг держать он не является совершенным, поскольку проверки диапазона не совсем правильные, но вам нужно что-то делать. :)

источник

2014-09-18 15:49:57

Спасибо! Это то, что я искал, и мне очень поможет! :) – Ned

Используйте его в качестве руководства. Существует несколько новых методов для исследования :) –

Я думаю, вам нужно использовать стильные кнопки или ссылки (а не div) для '+/-', поскольку они завершают выбор текста, когда вы нажимаете на них много (не выглядит хороший). –

Я думаю, это то, что вам нужно. Я добавил кнопку управления, чтобы добавить больше ограничений на слайдер.

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/

Днем Coding :)

источник

2014-09-19 06:37:18 dreamweiver

Встречное Javascript - Как добавить больше значений

ответ

Смежные вопросы