Сетка Просмотр списка Вид Переключение

Question

Сетка Просмотр списка Вид Переключение

В настоящее время у меня есть страница со списком продуктов в формате списка, и я хотел бы иметь возможность переключаться между двумя представлениями. Список заполняется динамически.

Ниже их статический ul, и я хотел бы заполнить их динамически.

$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});

<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>

<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>`enter code here`
<li>Item 7</li>
</ul>
</div>

1

grid list php view

Решение

По вопросам рекламы [email protected]

Accepted Answer

<script type="text/javascript">
$(document).ready(function(){
$("a.switcher").bind("click", function(e){
e.preventDefault();
var theid = $(this).attr("id");
var theproducts = $("ul#products");
var classNames = $(this).attr('class').split(' ');
if($(this).hasClass("active")) {
return false;
} else {
if(theid == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
$("#listview").children("img").attr("src","images/list-view.png");
var theimg = $(this).children("img");
theimg.attr("src","images/grid-view-active.png");
theproducts.removeClass("list");
theproducts.addClass("grid");
}
else if(theid == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
$("#gridview").children("img").attr("src","images/grid-view.png");
var theimg = $(this).children("img");
theimg.attr("src","images/list-view-active.png");
theproducts.removeClass("grid")
theproducts.addClass("list");
}
}
});
});
</script>

<table style="float: right;">
<tr><td><a href="#" id="gridview" class="switcher"><img src="https://web-answers.ru/wp-content/uploads/2019/03/grid-view.png" alt="Grid"></a></td><td>&nbsp;&nbsp;</td><td><a href="#" id="listview" class="switcher active"><img src="https://web-answers.ru/wp-content/uploads/2019/03/list-view-active.png" alt="List"></a></td>
</tr>
</table>

0

Другие решения

Других решений пока нет …

Источник