Как можно добавить кнопку у скрипту?

Question

[gfr3]

Подскажите ,есть скрипт

$(document).ready(function () {
var size_li = $("#tablatest-grid > div").size();
var x=6;
$( ".product:nth-child(6n)" ).css('opacity','0.2');
$('#tablatest-grid > div:lt('+x+')').fadeIn('slow');
$('.tm-message').hide();
$('.gridcount').click(function () {
if(x==size_li){
$('.gridcount').hide();
}else{
x= (x+6 <= size_li) ? x+6 : size_li;
$('#tablatest-grid > div:lt('+x+')').fadeIn('slow');
$( ".product:nth-child(6n)" ).css('opacity','1');
}
});
})

можно ли как то для .product:nth-child(6n) добавить еще к примеру кнопку

<button class="btn btn-default gridcount">Загрузить еще</button>

Answer 1

[nvdfxx]

$('.product:nth-child(6n)').append('<button class="btn btn-default gridcount">Загрузить еще</button>')

Comments

[gfr3]

спс работает,можете еще подсказать как сделать что бы она убиралась с первых 6 блоков

[nvdfxx]

в смысле убиралась? кнопка у этих блоков есть, надо удалить? В верстке поправить не проще?

[gfr3]

выходит так сейчас : выводятся 6 блоков и на 6 блоке появляется кнопка 'показать еще' , после ее нажатия появляются еще 6 блоков,но кнопка 'показать еще' остается на 6 блоке и появляется на 12, а нужно что бы она с 6 убиралась

[nvdfxx]

как у вас функционал "Показать еще" работает?

[gfr3]

есть 6 блоков первоначально и на 6 блоке кнопка показать еще, когда я ее нажимаю появляется еще 6 блоков, но первоначальная кнопка не удаляется
https://d.radikal.ru/d09/1812/42/ec0153b98d30.png

[nvdfxx]

ну по простому можно в начало функции вставить
$('.btn.btn-default.gridcount').remove();
и

$('.product:nth-child(6n)').append('<button class="btn btn-default gridcount">Загрузить еще</button>')

привязывать не к nth-child(6), а к последнему отображаемому элементу или вообще лучше к родителю этого списка

[gfr3]

как я понимаю в таком случае оно будет работать только 1 раз, а если к примеру нужно 3 раза, 18 блоков в ряд по 6, то на второй раз кнопка просто не появиться

[nvdfxx]

юзер нажал кнопку -> кнопка удалилась -> товары добавились -> кнопка появилась в конце списка,
все должно работать правильно

[gfr3]

привязывать не к nth-child(6), а к последнему отображаемому элементу или вообще лучше к родителю этого списка

можете пжл подсказать ка это сделать

[nvdfxx]

ну у вас есть что-то такое

<ul>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
</ul>

сейчас вы добавляете кнопку к каждому 6-му элементу этого списка, а нужно к самому списку, т.е.

$('ul').append('<button class="btn btn-default gridcount">Загрузить еще</button>')

[gfr3]

должно по затее быть
https://c.radikal.ru/c23/1812/0f/d1ff80742055.png

но если добавить к

• я же не смогу присвоить эту кнопку к последнему li

[nvdfxx]

Еще раз, не нужно кнопку привязывать к последнему товару, она к карточке товара отношения не имеет, нужно привязывать к самому списку(родительскому элементу товаров)

$('.btn').on('click', function() {
   $(this).remove();
   //загрузили новые товары в список
   $('ul').append('<button class="btn btn-default gridcount">Загрузить еще</button>')
});

[gfr3]

понял,спасибо !