Question

而不是使用ID element，data-code。我只是将.getElementById的所有内容更改为getElementByData-code吗？

// form validation function //
function validate(form) {
  var s_name = form.s_name.value;
  var s_email = form.s_email.value;
  var s_drop = form.s_drop.value;
// var s_promo = form.s_promo.value;
  var nameRegex = /^[A-Za-z\d_]+$/;
  var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  var msgRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
  if(s_name == "") {
    inlineMsg('s_name','You must enter your name.',2);
    return false;
  }
  if(!s_name.match(nameRegex)) {
    inlineMsg('s_txt','You have entered an invalid name.',2);
    return false;
  }
  if(s_email == "") {
    inlineMsg('s_email','<strong>Error</strong><br />You must enter your email.',2);
    return false;
  }
  if(!s_email.match(emailRegex)) {
    inlineMsg('s_email','<strong>Error</strong><br />You have entered an invalid email.',2);
    return false;
  }
  if(s_drop == "") {
    inlineMsg('s_drop','<strong>Error</strong><br />You must select your gender.',2);
    return false;
  }
/*
  if(s_promo == "") {
    inlineMsg('s_promo','You must enter a message.');
    return false;
  }
*/  
  if(s_promo.match(msgRegex)) {
    inlineMsg('s_promo','You have entered an invalid message.',2);
    return false;
  }
  return true;
}

// START OF MESSAGE SCRIPT //

var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
  var msg;
  var msgcontent;
  if(!document.getElementById('msg')) {
    msg = document.createElement('div');
    msg.id = 'msg';
    msgcontent = document.createElement('div');
    msgcontent.id = 'msgcontent';
    document.body.appendChild(msg);
    msg.appendChild(msgcontent);
    msg.style.filter = 'alpha(opacity=0)';
    msg.style.opacity = 0;
    msg.alpha = 0;
  } else {
    msg = document.getElementById('msg');
    msgcontent = document.getElementById('msgcontent');
  }
  msgcontent.innerHTML = string;
  msg.style.display = 'block';
  var msgheight = msg.offsetHeight;
  var targetdiv = document.getElementById(target);
  targetdiv.focus();
  var targetheight = targetdiv.offsetHeight;
  var targetwidth = targetdiv.offsetWidth;
  var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
  var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
  msg.style.top = topposition + 'px';
  msg.style.left = leftposition + 'px';
  clearInterval(msg.timer);
  msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
  if(!autohide) {
    autohide = MSGHIDE;  
  }
  window.setTimeout("hideMsg()", (autohide * 1000));
}

// hide the form alert //
function hideMsg(msg) {
  var msg = document.getElementById('msg');
  if(!msg.timer) {
    msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
  }
}

// face the message box //
function fadeMsg(flag) {
  if(flag == null) {
    flag = 1;
  }
  var msg = document.getElementById('msg');
  var value;
  if(flag == 1) {
    value = msg.alpha + MSGSPEED;
  } else {
    value = msg.alpha - MSGSPEED;
  }
  msg.alpha = value;
  msg.style.opacity = (value / 100);
  msg.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(msg.timer);
    msg.timer = null;
  } else if(value <= 1) {
    msg.style.display = "none";
    clearInterval(msg.timer);
  }
}

Answer 1

由于您使用的是jQuery，因此可以使用Sizzle Selection Engine（随jQuery打包）按属性选择所需的元素：

//this will select all elements with the `data-code` attribute with a value of `whatever`
var data_codes = $('[data-code="whatever"]');

您也可以选择具有特定属性的所有元素，而不管该属性的值如何：

var data_codes = $('[data-code]');

以下是jQuery具有的选择器类型列表（在列表的顶部是属性选择器）：http://api.jquery.com/category/selectors/

请注意，document.getElementById('SOME_ID')与$('#some_id')[0]相同。我将[0]添加到jQuery选择的末尾以仅返回DOM节点。您正在使用jQuery更容易的其他函数。 .innerHTML = 'some string';与.html('some string');相同，.style.display = 'block'与.show()或.css({display: 'block'})相同。

将元素ID更改为数据代码？

1 个答案: