HTML 网格视图和列表视图答案

【问题标题】：HTML Grid view and List ViewHTML 网格视图和列表视图
【发布时间】：2014-12-05 06:54:35
【问题描述】：

所以我希望我的内容根据我单击的按钮（网格视图和列表视图）来改变其外观.. 我做了一些研究，大部分的东西都可以用 jquery 来完成。但我只想使用 javascript。我的问题是：我应该使用什么元素？我目前正在使用语义 ui 对我的应用程序进行模式化（如果这甚至是一个真实的单词）。

我在 stackoverflow http://jsfiddle.net/LJf9p/794/ 中找到了这个 sn-p 但我似乎无法让它运行，我的意思是它运行但它不会根据按钮点击改变外观，如果我放上 html，我是否需要添加更多东西？它适用于小提琴，但当我在本地浏览器上运行它时不起作用。谢谢

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

【问题讨论】：

为什么不使用具有唯一 ID 的按钮？
如何使用我的按钮调用此 javascript 代码？谢谢。它适用于某些人发布的小提琴，但是当我将它复制到我的记事本++然后在浏览器上运行时它不起作用.. 样式有效，但动作无效
@Super 哦，我现在让它工作了。我只是给了按钮一个 onclick 方法，给了 ul 一个唯一的 id，然后使用 document.getElementById().classname 更改了它的类。如果有人需要的话。还是谢谢

标签： javascript html listview gridview

【解决方案1】：

请补充

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 和 $( 文档 ).ready(function() { });

有效

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $('button').click(function(e) {
        if ($(this).hasClass('grid')) {
            $('#container ul').removeClass('list').addClass('grid');
        }
        else if($(this).hasClass('list')) {
            $('#container ul').removeClass('grid').addClass('list');
        }
    });
});
</script>

【讨论】：

将在几分钟内尝试此操作。谢谢