Question

（下面的问题）

此处第一个脚本充当过滤器，当单击 .filter按钮时，将过滤掉与相应数据过滤器名称关联的所有div。所以基本上我有一个点击功能。

jQuery(document).ready(function(e) {
    var t = $(".filter-container");
    t.imagesLoaded(function() {
        t.isotope({
            itemSelector: "figure",
            filter: "*",
            resizable: false,
            animationEngine: "jquery"
        })
    });
    $(".filter-buttons a").click(function() {
        var n = $(this).parents(".filter-buttons");
        n.find(".selected").removeClass("selected");
        $(this).addClass("selected");
        var r = $(this).attr("data-filter");
        t.isotope({
            filter: r
        });
        event.preventDefault()
    });
    $(window).resize(function() {
        var n = $(window).width();
        t.isotope("reLayout")
    }).trigger("resize")
});

此处第二个脚本适用于我的 .filter-buttons ul li a 下拉列表。还有一个单击事件作用于同一个元素。

   function DropDown(el) {
            this.f = el;
            this.placeholder = this.f.children('span');
            this.opts = this.f.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.f.on('click', function(event){
                    $(this).toggleClass('active');
                    event.preventDefault()
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var f = new DropDown( $('#f') );

            $(document).click(function() {
                // all dropdowns
                $('.filter-buttons').removeClass('active');
            });

        });

我的问题是如何防止第一个脚本取消第二个脚本，反之亦然？我尝试删除“return false”行，并尝试更改脚本的顺序，但没有解决问题。我想合并它们，但说实话，我不确定这是怎么做的，或者它是否是正确的方法。

  <div id="f" class="filter-buttons" tabindex="1">
                        <span>Choose Genre</span>
                        <ul class="dropdown">
                            <li><a href="#" data-filter="*" class="selected">All</a></li>
                            <li><a href="#" data-filter=".electronic">Electronic</a></li>
                            <li><a href="#" data-filter=".popular">Popular</a></a></li>
                        </ul>
                    </div>

Answer 1

我认为你的jQuery有问题，我尝试了一个稍微简化的代码版本：

$(document).ready(function() {
    $(".filter-buttons a").click(function() {
        alert("click 1");
        event.preventDefault();
    });
});

function DropDown(el) {
    this.f = el;
    this.placeholder = this.f.children('span');
    this.opts = this.f.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
        
        obj.f.on('click', function(event){
            alert("click 2");
            $(this).toggleClass('active');
            event.preventDefault()
        });
        
        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(document).ready(function() {
    
    console.log($("#f"), $("#f").on);
    var f = new DropDown( $('#f') );
    
    $(document).click(function() {
        // all dropdowns
        $('.filter-buttons').removeClass('active');
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="f" class="filter-buttons" tabindex="1">
    <span>Choose Genre</span>
    <ul class="dropdown">
        <li><a href="#" data-filter="*" class="selected">All</a></li>
        <li><a href="#" data-filter=".electronic">Electronic</a></li>
        <li><a href="#" data-filter=".popular">Popular</a></li>
    </ul>
</div>

似乎有效，（按运行代码段）。但是当我使用jQuery v1.6.4在jsfiddle上运行它时，它不起作用，因为某些原因$("#f")不包含on函数，因此obj.f.on('click', function(event){不会分配事件，而是产生错误Uncaught TypeError: undefined is not a function（对我来说是Chrome）。我尝试用.on('click',替换.click(，这似乎有效。所以这可能意味着你需要更新版本的jQuery（v1.7或更高版本）来查看jQuery的.on()文档（http://api.jquery.com/on/）：

从jQuery 1.7开始，.on()方法提供了附加事件处理程序所需的所有功能。

或改为使用.click()。

两个插件。两者都在同一元素上有点击事件，但其中一个取消了另一个

1 个答案: