Question

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

我在stackoverflow http://jsfiddle.net/LJf9p/794/中找到了这个代码段但我似乎无法让它运行，我的意思是它运行，但它不会改变外观取决于按钮点击，如果我穿上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');
}
 });

Answer 1

请添加

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 和 $（document）.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>

HTML网格视图和列表视图

1 个答案: