jQuery函数不适用于鼠标悬停并单击状态

时间:2018-01-02 10:10:48

标签: javascript jquery

构建新网站并尝试重用当前网站上的JavaScript,以便在悬停时更改图片。我很难理解JavaScript,所以我希望有人能帮我看看我错过了什么或做错了什么。

当前站点(我从中复制)有更多脚本在运行,我不知道是否缺少其他脚本。我试图更改脚本的初始化部分以适应新站点。请查看当前页面上的拼图。 http://www.collyfiltreringsteknik.se

我已经让脚本运行到一个点,它添加了四个" quad" div但鼠标悬停和单击功能不起作用。

这是html代码

<div id="companyvalues" class="clearfix">
  <div class="valueimage"></div>
</div>

jQuery部分

(function($){
    $.fn.extend({
        companyvalues: function(kwargs) {
            var defaults = {
                static_base:''
            };
            var options = $.extend(defaults, kwargs);
            return this.each(function() {
                  var obj = $(this);
                  var div = $('div', obj);
                  var topleft = $('<div class="quad topleft" data-image="i0000" data-href="/grundpelare/tillganglighet/"></div>');
                  var topright = $('<div class="quad topright" data-image="i0003" data-href="/grundpelare/konkurrenskraft/"></div>');
                  var bottomleft = $('<div class="quad bottomleft" data-image="i0002" data-href="/grundpelare/miljoforbattring/"></div>');
                  var bottomright = $('<div class="quad bottomright" data-image="i0001" data-href="/grundpelare/kostnadsreducering/"></div>');

                  obj.prepend(bottomright);
                  obj.prepend(bottomleft);
                  obj.prepend(topright);
                  obj.prepend(topleft);

                  var divs = $('div.quad', obj);
                  $([ '/uploads/pages/varden_0000_yellow.png',
                      '/uploads/pages/varden_0001_red.png',
                      '/uploads/pages/varden_0002_green.png',
                      '/uploads/pages/varden_0003_blue.png'
                      ]).preload({base_url:options.static_base});

                  divs.mouseover(function(event) {
                      var item = $(this);
                      var data_image = item.attr('data-image');
                      div.addClass(data_image);
                      event.preventDefault();
                      event.stopPropagation();
                  });

                  divs.mouseout(function(event) {
                      var item = $(this);
                      div.removeClass('i0000');
                      div.removeClass('i0001');
                      div.removeClass('i0002');
                      div.removeClass('i0003');
                      event.preventDefault();
                      event.stopPropagation();
                  });

                  divs.click(function(event) {
                      var item = $(this);
                      var href = item.attr('data-href')
                      document.location.href=href;
                      event.preventDefault();
                      event.stopPropagation();
                  });

            });
        }
    });
})(jQuery);

初始化脚本。

$(document).ready(function() {
  $('#companyvalues').companyvalues();
});

0 个答案:

没有答案