有可能在html頁面中只有一個元素上執行外部js？

Question

我有這樣的代碼：

<div class="span4 offset1"> 
    <div class="project-image"> 
     <div id="fcSlideshow" class="fc-slideshow"> 
     <ul class="fc-slides"> 
      <li><a href="portfolio-single-project.html"><img src="img/save1.jpg" /></a></li> 
      <li><a href="portfolio-single-project.html"><img src="img/save.jpg" /></a></li> 
     </ul>   

和JS在頁面的底部從外部文件執行此元素

我需要執行這個js只有div的上面，因爲它與我在同一頁上嵌入的其他元素（日曆）發生衝突。 我無法訪問其他元素（日曆）代碼，因爲它作爲簡碼嵌入並由其他網站託管。 請建議我是什麼來糾正我的問題，請考慮，即時通訊初學者正確的方式..

外部js文件的代碼：

;(function($, window, undefined) { 

    'use strict'; 

    // ======================= imagesLoaded Plugin =============================== 
    // https://github.com/desandro/imagesloaded 

    // $('#my-container').imagesLoaded(myFunction) 
    // execute a callback when all images have loaded. 
    // needed because .load() doesn't work on cached images 

    // callback function gets image collection as argument 
    // this is the container 

    // original: mit license. paul irish. 2010. 
    // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou 

    // blank image data-uri bypasses webkit log warning (thx doug jones) 
    // blank image data-uri bypasses webkit log warning (thx doug jones) 
    var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 

    $.fn.imagesLoaded = function(callback) { 
     var $this = this, 
      deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, 
      hasNotify = $.isFunction(deferred.notify), 
      $images = $this.find('img').add($this.filter('img')), 
      loaded = [], 
      proper = [], 
      broken = []; 

     // Register deferred callbacks 
     if ($.isPlainObject(callback)) { 
      $.each(callback, function (key, value) { 
       if (key === 'callback') { 
        callback = value; 
       } else if (deferred) { 
        deferred[key](value); 
       } 
      }); 
     } 

     function doneLoading() { 
      var $proper = $(proper), 
       $broken = $(broken); 

      if (deferred) { 
       if (broken.length) { 
        deferred.reject($images, $proper, $broken); 
       } else { 
        deferred.resolve($images); 
       } 
      } 

      if ($.isFunction(callback)) { 
       callback.call($this, $images, $proper, $broken); 
      } 
     } 

     function imgLoadedHandler(event) { 
      imgLoaded(event.target, event.type === 'error'); 
     } 

     function imgLoaded(img, isBroken) { 
      // don't proceed if BLANK image, or image is already loaded 
      if (img.src === BLANK || $.inArray(img, loaded) !== -1) { 
       return; 
      } 

      // store element in loaded images array 
      loaded.push(img); 

      // keep track of broken and properly loaded images 
      if (isBroken) { 
       broken.push(img); 
      } else { 
       proper.push(img); 
      } 

      // cache image and its state for future calls 
      $.data(img, 'imagesLoaded', { isBroken: isBroken, src: img.src }); 

      // trigger deferred progress method if present 
      if (hasNotify) { 
       deferred.notifyWith($(img), [ isBroken, $images, $(proper), $(broken) ]); 
      } 

      // call doneLoading and clean listeners if all images are loaded 
      if ($images.length === loaded.length) { 
       setTimeout(doneLoading); 
       $images.unbind('.imagesLoaded', imgLoadedHandler); 
      } 
     } 

     // if no images, trigger immediately 
     if (!$images.length) { 
      doneLoading(); 
     } else { 
      $images.bind('load.imagesLoaded error.imagesLoaded', imgLoadedHandler) 
      .each(function(i, el) { 
       var src = el.src; 

       // find out if this image has been already checked for status 
       // if it was, and src has not changed, call imgLoaded on it 
       var cached = $.data(el, 'imagesLoaded'); 
       if (cached && cached.src === src) { 
        imgLoaded(el, cached.isBroken); 
        return; 
       } 

       // if complete is true and browser supports natural sizes, try 
       // to check for image status manually 
       if (el.complete && el.naturalWidth !== undefined) { 
        imgLoaded(el, el.naturalWidth === 0 || el.naturalHeight === 0); 
        return; 
       } 

       // cached images don't fire load sometimes, so we reset src, but only when 
       // dealing with IE, or image is complete (loaded) and failed manual check 
       // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
       if (el.readyState || el.complete) { 
        el.src = BLANK; 
        el.src = src; 
       } 
      }); 
     } 

     return deferred ? deferred.promise($this) : $this; 
    }; 

    // global 
    var Modernizr = window.Modernizr; 

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

    // the options 
    $.Flipshow.defaults = { 
     // default transition speed (ms) 
     speed : 1400, 
     // default transition easing 
     easing : 'ease-out' 
    }; 

    $.Flipshow.prototype = { 
     _init : function(options) { 

      // options 
      this.options = $.extend(true, {}, $.Flipshow.defaults, options); 
      // support for CSS Transitions & 3D transforms 
      this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && !(/MSIE (\d+\.\d+);/.test(navigator.userAgent)); 
      // transition end event name and transform name 
      var transEndEventNames = { 
        'WebkitTransition' : 'webkitTransitionEnd', 
        'MozTransition' : 'transitionend', 
        'OTransition' : 'oTransitionEnd', 
        'msTransition' : 'MSTransitionEnd', 
        'transition' : 'transitionend' 
       }, 
       transformNames = { 
        'WebkitTransform' : '-webkit-transform', 
        'MozTransform' : '-moz-transform', 
        'OTransform' : '-o-transform', 
        'msTransform' : '-ms-transform', 
        'transform' : 'transform' 
       }; 

      if(this.support) { 
       this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ] + '.cbpFWSlider'; 
       this.transformName = transformNames[ Modernizr.prefixed('transform') ]; 
      } 
      this.transitionProperties = this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing; 

      // the list of items 
      this.$listItems = this.$el.children('ul.fc-slides'); 
      // the items 
      this.$items = this.$listItems.children('li').hide(); 
      // total number of items 
      this.itemsCount = this.$items.length; 
      // current item´s index 
      this.current = 0; 
      this.$listItems.imagesLoaded($.proxy(function() { 
       // show first item 
       this.$items.eq(this.current).show(); 
       // add navigation and flipping structure 
       if(this.itemsCount > 0) { 
        this._addNav(); 
        if(this.support) { 
         this._layout(); 
        } 
       } 
      }, this)); 

     }, 
     _addNav : function() { 

      var self = this, 
       $navLeft = $('<div class="fc-left"><span></span><span></span><span></span><i class="icon-arrow-left"></i></div>'), 
       $navRight = $('<div class="fc-right"><span></span><span></span><span></span><i class="icon-arrow-right"></i></div>'); 

      $('<nav></nav>').append($navLeft, $navRight).appendTo(this.$el); 

      $navLeft.find('span').on('click.flipshow touchstart.flipshow', function() { 
       self._navigate($(this), 'left'); 
      }); 

      $navRight.find('span').on('click.flipshow touchstart.flipshow', function() { 
       self._navigate($(this), 'right'); 
      }); 

     }, 
     _layout : function($current, $next) { 

      this.$flipFront = $('<div class="fc-front"><div></div></div>'); 
      this.$frontContent = this.$flipFront.children('div:first'); 
      this.$flipBack = $('<div class="fc-back"><div></div></div>'); 
      this.$backContent = this.$flipBack.children('div:first'); 
      this.$flipEl = $('<div class="fc-flip"></div>').append(this.$flipFront, this.$flipBack).hide().appendTo(this.$el); 

     }, 
     _navigate : function($nav, dir) { 

      if(this.isAnimating && this.support) { 
       return false; 
      } 
      this.isAnimating = true; 

      var $currentItem = this.$items.eq(this.current).hide(); 

      if(dir === 'right') { 
       this.current < this.itemsCount - 1 ? ++this.current : this.current = 0; 
      } 
      else if(dir === 'left') { 
       this.current > 0 ? --this.current : this.current = this.itemsCount - 1; 
      } 

      var $nextItem = this.$items.eq(this.current); 

      if(this.support) { 
       this._flip($currentItem, $nextItem, dir, $nav.index()); 
      } 
      else { 
       $nextItem.show();    
      } 

     }, 
     _flip : function($currentItem, $nextItem, dir, angle) { 

      var transformProperties = '', 
       // overlays 
       $overlayLight = $('<div class="fc-overlay-light"></div>'), 
       $overlayDark = $('<div class="fc-overlay-dark"></div>'); 

      this.$flipEl.css('transition', this.transitionProperties); 

      this.$flipFront.find('div.fc-overlay-light, div.fc-overlay-dark').remove(); 
      this.$flipBack.find('div.fc-overlay-light, div.fc-overlay-dark').remove(); 

      if(dir === 'right') { 
       this.$flipFront.append($overlayLight); 
       this.$flipBack.append($overlayDark); 
       $overlayDark.css('opacity', 1); 
      } 
      else if(dir === 'left') { 
       this.$flipFront.append($overlayDark); 
       this.$flipBack.append($overlayLight); 
       $overlayLight.css('opacity', 1); 
      } 
      var overlayStyle = { transition : 'opacity ' + (this.options.speed/1.3) + 'ms' }; 
      $overlayLight.css(overlayStyle); 
      $overlayDark.css(overlayStyle); 

      switch(angle) { 
       case 0 : 
        transformProperties = dir === 'left' ? 'rotate3d(-1,1,0,-179deg) rotate3d(-1,1,0,-1deg)' : 'rotate3d(1,1,0,180deg)'; 
        break; 
       case 1 : 
        transformProperties = dir === 'left' ? 'rotate3d(0,1,0,-179deg) rotate3d(0,1,0,-1deg)' : 'rotate3d(0,1,0,180deg)'; 
        break; 
       case 2 : 
        transformProperties = dir === 'left' ? 'rotate3d(1,1,0,-179deg) rotate3d(1,1,0,-1deg)' : 'rotate3d(-1,1,0,179deg) rotate3d(-1,1,0,1deg)'; 
        break; 
      } 

      this.$flipBack.css('transform', transformProperties); 

      this.$frontContent.empty().html($currentItem.html()); 
      this.$backContent.empty().html($nextItem.html()); 
      this.$flipEl.show(); 

      var self = this; 
      setTimeout(function() { 

       self.$flipEl.css('transform', transformProperties); 
       $overlayLight.css('opacity', dir === 'right' ? 1 : 0); 
       $overlayDark.css('opacity', dir === 'right' ? 0 : 1); 
       self.$flipEl.on(self.transEndEventName, function(event) { 
        if(event.target.className === 'fc-overlay-light' || event.target.className === 'fc-overlay-dark') return; 
        self._ontransitionend($nextItem); 
       }); 

      }, 25); 

     }, 
     _ontransitionend : function($nextItem) { 
      $nextItem.show(); 
      this.$flipEl.off(this.transEndEventName).css({ 
       transition : 'none', 
       transform : 'none' 
      }).hide(); 
      this.isAnimating = false; 
     } 
    }; 

    var logError = function(message) { 
     if (window.console) { 
      window.console.error(message); 
     } 
    }; 

    $.fn.flipshow = function(options) { 
     if (typeof options === 'string') { 
      var args = Array.prototype.slice.call(arguments, 1); 
      this.each(function() { 
       var instance = $.data(this, 'flipshow'); 
       if (!instance) { 
        logError("cannot call methods on flipshow prior to initialization; " + 
        "attempted to call method '" + options + "'"); 
        return; 
       } 
       if (!$.isFunction(instance[options]) || options.charAt(0) === "_") { 
        logError("no such method '" + options + "' for flipshow instance"); 
        return; 
       } 
       instance[ options ].apply(instance, args); 
      }); 
     } 
     else { 
      this.each(function() { 
       var instance = $.data(this, 'flipshow'); 
       if (instance) { 
        instance._init(); 
       } 
       else { 
        instance = $.data(this, 'flipshow', new $.Flipshow(options, this)); 
       } 
      }); 
     } 
     return this; 
    }; 

})(jQuery, window); 

Answer 1

如果你的DIV是 <div class="span4 offset1">連鎖行業的id這個div像

<div class="span4 offset1" id="my_sample_id"> 

現在，在您js文件中使用此id ..

如果你想只有這div有效果

嘗試使用下面的代碼一樣

$('#my_sample_id').click(function(){ //Something like that.. 

}); 

希望這可以幫助你.. :)