1

jQueryを使用して次のコードを作成しました。

$('.status-infos').click( function (e) {
    var xx = $(this).attr('data-xx');
    alert(xx);
    return false;
  });

私たちのサイトのメイン ページは jQuery を使用しなくなったため、javascript のみを使用してこれと同様の処理を行う必要があります。

クリックイベントを取得する方法としてこれを見ました：

document.getElementById('element').onclick = function(e){
  alert('click');
}

しかし、どうすればxx属性を取得できますか。

4

5 に答える 5

2

以下を使用できます。

document.getElementsByClassName('status-infos')

次に、その配列をループして使用します..onclick = function() {}

使用:element.getAttribute()データ属性を取得する

于 2013-01-13T19:20:08.273 に答える
1

こちらもIE8+の完全版です

デモ

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

window.onload=function() {
  var statinf = getElementsByClassName("status-infos");
  for (var i=0;i<statinf.length;i++) {
    statinf[i].onclick=function() {
      var xx = this.getAttribute('data-xx');
      alert(xx);
      return false;
    }
  }
}
于 2013-01-13T19:26:40.437 に答える
1

最新のブラウザー向けのソリューション:

var els = document.querySelectorAll(".status-infos");
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener("click", function() {
        var xx = this.getAttribute("data-xx");
        alert(xx);
        return false;
    });
}
于 2013-01-13T19:21:33.667 に答える
0

addEventListeneror attachEvent(IE)を使用します。

var elements = document.getElementByClassName('status-infos');

for(var i=0; i < elements.length; i++) {
   elements[i].addEventListener('click', function(e) {
    ...
    });
}

より詳しい情報

于 2013-01-13T19:22:11.963 に答える
0

jQuery は常に開発者を怠けさせてきました。次のコードを試してください。

/* http://dustindiaz.com/rock-solid-addevent */
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }

    else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on" + type] = obj["e" + type + fn];
    }
}
var EventCache = function() {
    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;
            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };
                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();
/* http://www.dustindiaz.com/getelementsbyclass */
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
var statuss=getElementsByClass('status-infos');
for (var i=0;i<statuss.length;i++){
addEvent(statuss[i], 'click', function (e) {
    var xx = this.getAttribute('data-xx');
    alert(xx);
    return false;
  });
}

デモ| デモソース

于 2013-01-13T19:26:36.307 に答える