使用jquery .on（）方法作用于相同元素（选项标记）的两个脚本之间的冲突

Question

Im有冲突。我写了一个简单的脚本，它根据类名过滤div。它工作，但不是当我添加第三方脚本。这里的相关行是.on函数。第三方代码禁止我的代码运行。这两个目标选项标签都在html代码中。

我试着在我的代码中删除了“返回false”，但没有成功。试图把我的代码放在最上面...什么都没有。我想过使用event.stopPropagation()。我读过它。这可以在我的情况下工作，我该如何整合它？

我想提供一个功能jsfiddle，但不幸的是我没有如此训练使用帽子网站，因为我更习惯于记事本++和Dreamweaver。

这里是我的自定义脚本：

jQuery(document).ready(function (e) { 
    var t = e("#filter-container"); 
    t.imagesLoaded(function() { 
     t.isotope({ 
      itemSelector: "figure", 
      filter: "*", 
      resizable: false, 
      animationEngine: "jquery" 
     }) 
    }); 
    $("select").on("change", function() { 
     var select = $(this); 
     var selectedOption = select.find("option:selected"); 
     var r = selectedOption.attr("data-filter"); 
     t.isotope({ 
      filter: r 
     }); 
     return false 
    }); 
    e(window).resize(function() { 
     var n = e(window).width(); 
     t.isotope("reLayout") 
    }).trigger("resize") 
}); 

且有第三方脚本：

(function ($, window, undefined) { 
    'use strict'; 

    $.DropDown = function (options, element) { 
     this.$el = $(element); 
     this._init(options); 
    }; 

    // the options 
    $.DropDown.defaults = { 
     speed: 300, 
     easing: 'ease', 
     gutter: 0, 
     // initial stack effect 
     stack: true, 
     // delay between each option animation 
     delay: 0, 
     // random angle and positions for the options 
     random: false, 
     // rotated [right||left||false] : the options will be rotated to thr right side or left side. 
     // make sure to tune the transform origin in the stylesheet 
     rotated: false, 
     // effect to slide in the options. value is the margin to start with 
     slidingIn: false, 
     onOptionSelect: function (opt) { 
      return false; 
     } 
    }; 

    $.DropDown.prototype = { 

     _init: function (options) { 

      // options 
      this.options = $.extend(true, {}, $.DropDown.defaults, options); 
      this._layout(); 
      this._initEvents(); 

     }, 
     _layout: function() { 

      var self = this; 
      this.minZIndex = 1000; 
      var value = this._transformSelect(); 
      this.opts = this.listopts.children('li'); 
      this.optsCount = this.opts.length; 
      this.size = { 
       width: this.dd.width(), 
       height: this.dd.height() 
      }; 

      var elName = this.$el.attr('name'), 
       elId = this.$el.attr('id'), 
       inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + (new Date()).getTime(); 

      this.inputEl = $('<input type="hidden" name="' + inputName + '" value="' + value + '"></input>').insertAfter(this.selectlabel); 

      this.selectlabel.css('z-index', this.minZIndex + this.optsCount); 
      this._positionOpts(); 
      if (Modernizr.csstransitions) { 
       setTimeout(function() { 
        self.opts.css('transition', 'all ' + self.options.speed + 'ms ' + self.options.easing); 
       }, 25); 
      } 

     }, 
     _transformSelect: function() { 

      var optshtml = '', 
       selectlabel = '', 
       value = -1; 
      this.$el.children('option').each(function() { 

       var $this = $(this), 
        val = isNaN($this.attr('value')) ? $this.attr('value') : Number($this.attr('value')), 
        classes = $this.attr('class'), 
        selected = $this.attr('selected'), 
        label = $this.text(); 

       if (val !== -1) { 
        optshtml += classes !== undefined ? 
         '<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' : 
         '<li data-value="' + val + '"><span>' + label + '</span></li>'; 
       } 

       if (selected) { 
        selectlabel = label; 
        value = val; 
       } 

      }); 

      this.listopts = $('<ul/>').append(optshtml); 
      this.selectlabel = $('<span/>').append(selectlabel); 
      this.dd = $('<div class="cd-dropdown"/>').append(this.selectlabel, this.listopts).insertAfter(this.$el); 
      this.$el.remove(); 

      return value; 

     }, 
     _positionOpts: function (anim) { 

      var self = this; 

      this.listopts.css('height', 'auto'); 
      this.opts.each(function (i) { 
       $(this).css({ 
        zIndex: self.minZIndex + self.optsCount - 1 - i, 
        top: self.options.slidingIn ? (i + 1) * (self.size.height + self.options.gutter) : 0, 
        left: 0, 
        marginLeft: self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : -self.options.slidingIn : 0, 
        opacity: self.options.slidingIn ? 0 : 1, 
        transform: 'none' 
       }); 
      }); 

      if (!this.options.slidingIn) { 
       this.opts.eq(this.optsCount - 1) 
        .css({ 
        top: this.options.stack ? 9 : 0, 
        left: this.options.stack ? 4 : 0, 
        width: this.options.stack ? this.size.width - 8 : this.size.width, 
        transform: 'none' 
       }) 
        .end() 
        .eq(this.optsCount - 2) 
        .css({ 
        top: this.options.stack ? 6 : 0, 
        left: this.options.stack ? 2 : 0, 
        width: this.options.stack ? this.size.width - 4 : this.size.width, 
        transform: 'none' 
       }) 
        .end() 
        .eq(this.optsCount - 3) 
        .css({ 
        top: this.options.stack ? 3 : 0, 
        left: 0, 
        transform: 'none' 
       }); 
      } 

     }, 
     _initEvents: function() { 

      var self = this; 

      this.selectlabel.on('mousedown.dropdown', function (event) { 
       self.opened ? self.close() : self.open(); 
       return false; 

      }); 

      this.opts.on('click.dropdown', function() { 
       if (self.opened) { 
        var opt = $(this); 
        self.options.onOptionSelect(opt); 
        self.inputEl.val(opt.data('value')); 
        self.selectlabel.html(opt.html()); 
        self.close(); 
       } 
      }); 

     }, 
     open: function() { 
      var self = this; 
      this.dd.toggleClass('cd-active'); 
      this.listopts.css('height', (this.optsCount + 1) * (this.size.height + this.options.gutter)); 
      this.opts.each(function (i) { 

       $(this).css({ 
        opacity: 1, 
        top: self.options.rotated ? self.size.height + self.options.gutter : (i + 1) * (self.size.height + self.options.gutter), 
        left: self.options.random ? Math.floor(Math.random() * 11 - 5) : 0, 
        width: self.size.width, 
        marginLeft: 0, 
        transform: self.options.random ? 
         'rotate(' + Math.floor(Math.random() * 11 - 5) + 'deg)' : self.options.rotated ? self.options.rotated === 'right' ? 
         'rotate(-' + (i * 5) + 'deg)' : 
         'rotate(' + (i * 5) + 'deg)' : 'none', 
        transitionDelay: self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? (i * self.options.delay) + 'ms' : ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : 0 
       }); 

      }); 
      this.opened = true; 

     }, 
     close: function() { 

      var self = this; 
      this.dd.toggleClass('cd-active'); 
      if (this.options.delay && Modernizr.csstransitions) { 
       this.opts.each(function (i) { 
        $(this).css({ 
         'transition-delay': self.options.slidingIn ? ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : (i * self.options.delay) + 'ms' 
        }); 
       }); 
      } 
      this._positionOpts(true); 
      this.opened = false; 

     } 

    } 

    $.fn.dropdown = function (options) { 
     var instance = $.data(this, 'dropdown'); 
     if (typeof options === 'string') { 
      var args = Array.prototype.slice.call(arguments, 1); 
      this.each(function() { 
       instance[options].apply(instance, args); 
      }); 
     } else { 
      this.each(function() { 
       instance ? instance._init() : instance = $.data(this, 'dropdown', new $.DropDown(options, this)); 
      }); 
     } 
     return instance; 
    }; 

})(jQuery, window); 

那会是什么？

我希望有人能够启发我。我目前正试图为我目前生病的小弟弟创建一个网站。他总是想要一个音乐网站，所以我想我只是为他创建一个。阻止我发布它的唯一因素是这两个脚本之间的冲突。

Answer 1

上的评论长聊后...

第三方script是对dropdowns（selects）应用效果的插件。基本上它将附加元素转换成ul，并将每个option作为li。

在您的一段代码中，您尝试通过检查选中哪一个option来尝试检索所选的value，这将不再有效。 该插件将选定的value保存在hidden field中。

我会更改您的代码是这样的：

$(function() { 
    var t = $("#filter-container"); 

    t.imagesLoaded(function() { 
     t.isotope({ 
      itemSelector: "figure", 
      filter: "*", 
      resizable: false, 
      animationEngine: "jquery" 
     }); 
    });   

    $(window).on('resize', function() { 
     var n = $(this).width(); 

     t.isotope("reLayout");   
    }).trigger("resize"); 
}); 

---

然后在页面中查找下面的代码，并改变它：

$(function() { 
    $('#cd-dropdown').dropdown({ 
     gutter : 5, 
     onOptionSelect: function (opt) { 
      $("#filter-container").isotope({ 
       filter: opt.data('value') 
      }); 
     } 
    }); 
}); 

---

的isotope过滤器适用于您在selectoptions中设置的课程，但由于该插件需要ri d，并用ul取代，此数据现在丢失。

要使其工作，你需要稍微改变你的select标记：

<select id="cd-dropdown" class="cd-select"> 
    <option value="*" selected>Pick a Genre</option> 
    <option value="*">All</option> 
    <option value=".epic">Epic</option> 
    <option value=".classic">Classic</option> 
    <option value=".regional">Regional</option> 
    <option value=".electronic">Electronic</option> 
</select>