檢索元素的類名和ID時，我總是不確定

Question

我正在使用此代碼進行調試...

$(document).ready(function() {
  $('.slider').slider();
});

$.fn.slider = function() {
  return this.each(function() {
    var $el = $(this);
    var dragging = false;
    var startX = $el.offset().left;
    var startL = 0;
    $el.mousedown(function(ev) {
        dragging = true;
        startX = ev.clientX;
        startL = $(this).css('left');
        alert("class: "+ $el.className +"   id: " + $el.id);
    });

    $(document).mousemove(function(ev) {
        if (dragging) {
            var newLeft = parseInt(startL) + (ev.clientX - startX);
            $el.css('left', newLeft );
        }
    }).mouseup(function() {
        dragging = false;
    });
  });
}

注意： alert("class: "+ $el.className +" id: " + $el.id); 它始終為$el.className和$el.id返回“未定義”。

如何獲取返回單擊的元素（div）的ID和類的信息？

我嘗試了$el和.id許多變體，但似乎沒有任何效果。

Answer 1

您正在混合使用jQuery和香草javascript屬性。 className是vanilla， $(this)創建一個jQuery對象。

要么改變

$el.className

至

$el.attr('class')

或者如果您想使用className ：

var $el = $(this);

至

var $el = this;

（盡管這也需要更改代碼的其他部分）

Answer 2

嘗試如下：

$(function() {
$("div").click(function() {
     var name = this.name;
     var cls = this.className;
     var id= this.id;

     alert("Name: " + name + " / Class: " + cls + " / Id: " + id);
    });
});