Коробка поменяется с номером? (JQuery)

Question

Коробка поменяется с номером? (JQuery)

0

Я не могу понять, как это сделать с помощью jQuery.

Это мой HTML-код:

<div id="contentbox1" class="contentbox">content 1</div>
<div id="contentbox2" class="contentbox" style="display: none;">content 2</div>
<div id="contentbox3" class="contentbox" style="display: none;">content 3</div>
<div id="contentbox4" class="contentbox" style="display: none;">content 4</div>
<div id="contentbox5" class="contentbox" style="display: none;">content 5</div>
<hr />
<div id="pager" class="pager"> <span id="actualpage">1</span>/5</div>

CSS:

div.contentbox {
    width: 300px;
    height: 300px;
    background: #cccccc;
    float: left;
    display: inline;
}
div.pager {
    cursor: pointer;
}
hr {
    display: block;
    clear: both;
    margin: 10px 0px 10px 0px;
}

Я не могу понять, как я могу его развить, если я #pager на #pager чтобы увидеть следующее поле и изменить первый номер в #actualpage. Возможно ли с функциями jQuery?

Я пробовал много способов сделать это, но безуспешно. Это мой JSFIDDLE.

m_73 20 март 2014, в 13:12

Источник

1

Вы не включили jQuery в свой пример скрипки. Проверьте вашу консоль JS, чтобы увидеть ошибки.
Lix 20 март 2014, в 11:56
0

Убедитесь, что вы включили JQuery, которого нет в вашей скрипке. Посмотрите на мой ответ на то же самое с живой демонстрацией
SpiderCode 20 март 2014, в 12:06

Теги:

jquery

html

css

4 ответа

1

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

Демо- версия JSFiddle

$("#pager").on("click", function () {
    var len = $('.contentbox').length;
    var cur = +($('#actualpage').text());
    if (cur === len) cur = 0;
    $('#actualpage').text(cur+1);
    $('.contentbox').hide();
    $('#contentbox' + (cur+1)).show();
});

lshettyl 20 март 2014, в 09:28

0

Вы можете использовать оператор modulo, который изменяет значение переменной count..simply

var count=1;
   $('#pager').click(function(){
       count++;
       $('.contentbox').hide();
       $('#contentbox'+(count)).show();
       $(this).find('#actualpage').html(count);
       if(count%5==0){count-=5};
   })

Devima 20 март 2014, в 12:55

0

Убедитесь, что вы включили JQuery на свою страницу. Обновите JQuery, как указано ниже:

var currentPage = 1;
$("#pager").on("click", function () {
    var nextPage;
    if(currentPage == 5)
    {
        nextPage = 1;
    }
    else
    {
        nextPage = currentPage+1;
    }

    $('#contentbox' + currentPage).hide(500);
    $('#contentbox' + nextPage).show(500);
    currentPage = nextPage;
    $('#actualpage').html(currentPage);

});

SpiderCode 20 март 2014, в 10:19

Ещё вопросы

Вы не включили jQuery в свой пример скрипки. Проверьте вашу консоль JS, чтобы увидеть ошибки.
Убедитесь, что вы включили JQuery, которого нет в вашей скрипке. Посмотрите на мой ответ на то же самое с живой демонстрацией

neel shah · Accepted Answer · 2014-03-20T10-37-00.000Z

Вы можете сделать это так: Fiddle

$("#pager").on("click", function () {
    var temp = $('#actualpage').html();
    $('#contentbox' + temp).attr('style', 'display: none;');
    temp = (parseInt(temp) + 1) % 6;
    temp = temp == 0 ? 1 : temp;
    $('#contentbox' + temp).removeAttr('style');
    $('#actualpage').html(temp);
});

А когда нажимаешь на 5-й, показывает 6/5?