切换两个div查询

时间:2017-07-04 05:43:43

标签: javascript jquery toggle hide show

嗨我想切换两个div。我做到了基本的方式,但我真的想用这种方式写它,我不知道这有什么问题。有人可以帮我吗?

    (function($) {

    var showAll = function() {
        this.$button = this.find('.btn-all-events');
        this.$all = this.find('.all-events');
        this.$recent = this.find('.recent-events');

        this.initEvents();
    };

    showAll.prototype = {
        initEvents: function() {

            if (this.$all) {
                this.$button.on('click', this.showEvents.bind(this));
            }
        },

        showEvents: function() {
            this.$recent.hide();
            this.$all.show();
        }
    };

    this.toggle = new showAll($(this));
})(jQuery);

2 个答案:

答案 0 :(得分:0)

使用$(this).find()而非this.find()如下所示

$(this).find('.btn-all-events');

答案 1 :(得分:0)

只需使用jquery切换div。你可以在这里查看https://jsfiddle.net/surendra786/os09Lhfw/

html --   
   <div class="main">
    <div class="first">Divdfasdfasdfsd</div>
    <div class="second hide">afsdfasfasdfasdfsdf</div>
   </div>
  <a class="toggle">toggle</a>

css--

<style>
 .hide {
display:none;
 }
</style>

 js---

 $('.toggle').click(function(){
if($('.first').hasClass('hide')){
$('.first').removeClass('hide');
} else {
$('.first').addClass('hide');
}
if($('.second').hasClass('hide')){
$('.second').removeClass('hide');
 } else {
$('.second').addClass('hide');
 }
});

试试这个它应该有效,请工作