Я работаю над меню для отображения продуктов для конопли каннабиса. Когда у нас есть взвешенный элемент, такой как цветок, я бы хотел, чтобы пользователи могли циклически перемещаться по списку весов (обычно это грамм, восьмая, четверть, половина и унция).
У меня работает функциональная идея - перебирать список и отображать по одному элементу за раз, но до сих пор он работал только при выборе jQuery по идентификатору.
Поскольку будет несколько продуктов отображаемые в одно время, они должны работать независимо друг от друга.
Таким образом, вес отображается следующим образом:
<div class="prev"><i class="fas fa-chevron-left fa-lg"></i></div>
<div class="p-0 text-center"><ul class='weightList' style="list-style-type:none;padding-left:0">
<li>$15.00<br><div class="grey-text">Gram (1g)</div></li>
<li>$50.00<br><div class="grey-text">Eighth (3.5g)</div></li>
<li>$100.00<br><div class="grey-text">Quarter (7g)</div></li>
<li>$200.00<br><div class="grey-text">Half Ounce (14g)</div></li>
<li>$350.00<br><div class="grey-text">Ounce (28g)</div></li>
</ul>
</div>
<div class="p-0"><div class="next"><i class="fas fa-chevron-right fa-lg"></i>
</div>
</div>
Мой jQuery (пока - это где Мне нужна помощь) выглядит следующим образом:
var $lis = $(".weightList li").hide();
$lis.slice(0, 1).show();
var size_li = $lis.length;
var x = 1,
start = 0;
$('.next').click(function () {
if (start + x < size_li) {
$lis.slice(start, start + x).hide();
start += x;
$lis.slice(start, start + x).show();
}
});
$('.prev').click(function () {
if (start - x >= 0) {
$lis.slice(start, start + x).hide();
start -= x;
$lis.slice(start, start + x).show();
}
});
Я подумал о создании div'ов 'prev', 'next' и неупорядоченного списка 'weightList' с идентификаторами, которые содержат идентификатор продукта, а затем с использованием идентификатор продукта, чтобы определить, с каким списком работать, но я не совсем уверен, как его настроить, и он кажется неэффективным / игнорирует некоторые функции jQuery.
Я настроил скрипку с тем, что я начали с: https://jsfiddle.net/qy2hb7sd/
Первое, что вы увидите, это то, что отображается только список весов под первым продуктом, второй список скрыт (оба должны начинаться с $ 15,00 с Грамм (1 г) ниже).
Во-вторых, вы увидите, что предыдущая и следующая стрелки не работают независимо и что списки веса под обоими продуктами действуют как один список, при этом список отображается на второй продукт только после того, как вы перебрали первый продукт (цена и вес перепрыгнули между продуктами).
Может быть несколько десятков товаров, загруженных на страницу одновременно (я выбрал 2 как простой пример).
Я надеюсь, что объяснил себя и свой желаемый результат, и я с нетерпением жду, чтобы изучить некоторые хорошие jQuery трюки.