0

'$this.css(...)' is null or not an object

このエラーが発生しますが、IE でのみ発生します (8 より上ではテストしていないため、8 より下でテストする必要はありません)。

このドラッグ可能なバックグラウンドプラグインを使用していますが、それがエラーの原因です。以下のエラーが発生する場所のコードの一部を削除します-このスニペットの3行目

    var x0 = e.clientX
      , y0 = e.clientY
      , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
      , xPos = parseInt(pos[1]) || 0
      , yPos = parseInt(pos[2]) || 0

クリックしてドラッグして背景を移動しようとすると、すぐにエラーが発生します

任意の提案をいただければ幸いです

ありがとう

編集：以下は完全なスクリプトです

  !function($) {
    var $window = $(window)

    // Helper function to guarantee a value between low and hi unless bool is false
    var limit = function(low, hi, value, bool) {
      if (arguments.length === 3 || bool) {
        if (value < low) return low
        if (value > hi) return hi
      }
      return value
    }

    // Adds clientX and clientY properties to the jQuery's event object from touch
    var modifyEventForTouch = function(e) {
      e.clientX = e.originalEvent.touches[0].clientX
      e.clientY = e.originalEvent.touches[0].clientY
    }

    $.fn.backgroundDraggable = function(options) {
      var options = $.extend({}, $.fn.backgroundDraggable.defaults, options)

      return this.each(function() {
        var $this = $(this)
          , $bg = $this.css('background-image')
          , src = $bg.match(/^url\(['"]?(.*?)['"]?\)$/i)

        // If no background-image css property or no src just return
        if (!$bg || !src) return

        // Get the image's width and height if bound
        var img = { width: 0, height: 0 }
        if (options.bound) {
          var i = new Image
          i.onload = function() {
            img.width = i.width
            img.height = i.height
          }
          i.src = src[1]
        }

        $this.on('mousedown.dbg touchstart.dbg', function(e) {
          e.preventDefault()

          if (e.originalEvent.touches) {
            modifyEventForTouch(e)
          }
          else if (e.which !== 1) {
            return
          }

          var x0 = e.clientX
            , y0 = e.clientY
            , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
            , xPos = parseInt(pos[1]) || 0
            , yPos = parseInt(pos[2]) || 0

          $window.on('mousemove.dbg touchmove.dbg', function(e) {
            e.preventDefault()

            if (e.originalEvent.touches) {
              modifyEventForTouch(e)
            }

            var x = e.clientX
              , y = e.clientY

            xPos = options.axis === 'y' ? xPos : limit($this.innerWidth()-img.width, 0, xPos+x-x0, options.bound)
            yPos = options.axis === 'x' ? yPos : limit($this.innerHeight()-img.height, 0, yPos+y-y0, options.bound)
            x0 = x
            y0 = y

            $this.css('background-position', xPos + 'px ' + yPos + 'px')
          })
        })

        $window.on('mouseup.dbg touchend.dbg', function() { $window.off('mousemove.dbg touchmove.dbg') })
      })
    }

    $.fn.backgroundDraggable.defaults = {
      bound: true
    , axis: undefined
    }
  }(jQuery);
4

3 に答える 3

3

OP への私のコメントで推測され、別のコメンテーターによって確認されたように、IE 8 は単にその特定の CSS プロパティをサポートしていないため、.css()関数の出力は未定義です。

詳細については、IE での背景位置の修正を参照してください。

https://github.com/brandonaaron/jquery-cssHooks/ (bgpos.js モジュールを探してください)で IE を使用するときに、その CSS プロパティを jQuery に追加する jQuery プラグインを入手することもできます。

于 2013-07-23T13:58:16.317 に答える
1

$(this).css()、またはthis.css、周囲に応じて...

@brewel がコメントで指摘したように、それは$thisとして定義されているようです$(this)。したがって、問題は css 値にあります: IE での背景位置の修正background-position

言って

Interweb をもう少し掘り下げると、答えが明らかになりました。IE はセレクターの背景位置を理解していません。非標準の background-position-x と background-position-y を理解します。

于 2013-07-23T13:50:59.937 に答える