Question

我最近学会了如何通过点击来改变课程，但是我现在正在尝试一些更棘手的东西并且卡住了。

我需要在按钮单击时更改类，但同时也隐藏div。

这是我到目前为止所拥有的：

    <script type="text/javascript">
        $('button').click(function(e) {
            if ($(this).hasClass('grid')) {
                $('#primary ul').removeClass('stylelist').addClass('grid');
                $('#single-style-text').hide();
            }
            else if($(this).hasClass('list')) {
                $('#primary ul').removeClass('grid').addClass('stylelist');
                $('#single-style-text').show();
            }
        });
    </script>

我想在网格类处于活动状态时隐藏div＃single-style-text，并在stylelist类处于活动状态时显示它。

有没有更好的方法来编写此代码？

由于

Answer 1

我会尝试这样的事情：

$('button').click(function(e) {
    var button = $(this);
    var hasGrid = button.hasClass('grid');

    $('#primary ul')
        .toggleClass('stylelist', hasGrid)
        .toggleClass('stylegrid', !hasGrid);
    button
        .toggleClass('list', hasGrid)
        .toggleClass('grid', !hasGrid);

    $('#single-style-text').toggle(hasGrid);
});

如果我看到更多标记，

可以给出一个更具体的例子...但这是通过切换类的基础......

关于jsfiddle的例子： http://jsfiddle.net/Xc7pH/2/

Answer 2

这看起来对我很好。您可以通过缓存选择器来更有效地完成工作。如，

// assuming these don't change, cache these outside of click handler
// so that we only have to run these queries once, rather than on
// every click
var $primary = $('#primary ul'),
    $single = $('#single-style-text');

$('button').click(function(e) {
    var $this = $(this);

    if ($this.hasClass('grid')) {
        $primary.removeClass('stylelist').addClass('grid');
        $single.hide();
    } else if($this.hasClass('list')) {
        $primary.removeClass('grid').addClass('stylelist');
        $single.show();
    }
});

Answer 3

制作隐藏的样式，在需要时应用它并在不需要时将其取出。

<style ...>
  .noSeeum { display:none }
</style>


<script ...
$('button').click(function(e) {
  if($(this).hasClass('grid')) {
    $('#primary ul').removeClass('stylelist').addClass('grid').addClass('noSeeum');
  } else if($(this).hasClass('list')) {
    $('#primary ul').removeClass('grid').addClass('stylelist').removeClass('noSeeum');
  }
});
</script>

更改类并在一次单击时隐藏div？

3 个答案: