jQuery : 5 개의 ID 추가 (클래스 대신)

Question

이 상황을 다루고 있습니다.

• ID로 대상으로하는 색상 애니메이션 스크립트가 있습니다 (jQuery가 아니라 순수한 JavaScript).
• 그런 다음 ID가없는 동적 목록이 있습니다.
• 그리고 마지막으로 나는 jQuery 자체를 가지고 있습니다 (나는 목록 항목에 몇 가지 ID를 즉시 추가하는 데 사용할 것입니다. 그러나 나는 여전히 방법을 모릅니다)

컬러 플러그인은 ID로만 검색하기 때문에 jQuery와 함께 단일 클래스를 목록 항목에 추가 할 수 없다는 것을 깨달았습니다 (클래스와 평행이없는 getElementById를 사용합니다).

AddClass JQ 기능을 제외해야합니다.이 기능은 직장에서 쉽게 넣을 수 있습니다.

스크립트는 목록에 ID를 삽입 할 수있는 경우에만 작동하며, 잘 정의 된 5 개의 ID를, 외부화 된 컬러 플러그인에 나중에 몇 가지 지침을 제공하여 다음과 같습니다.

<ul>
     <li><a href="" id="ontheflyone">pulled from the DB</a></li>
     <li><a href="" id="ontheflytwo">pulled from the DB</a></li>
     <li><a href="" id="ontheflythree">pulled from the DB</a></li>
     <li><a href="" id="ontheflyfour">pulled from the DB</a></li>
     <li><a href="" id="ontheflyfive">pulled from the DB</a></li>
</ul>

그런 다음 지침 :

document.getElementById(’id’).onmouseover = function() { 'ontheflyone','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflyone','text','$color2'};

document.getElementById(’id’).onmouseover = function() { 'ontheflytwo','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflytwo','text','$color2'};

etc.

플러그인의 JavaScript 자체를 변경할 수는 있지만 jQuery를 사용하여 HTML에 ID를 추가하는 것이 더 쉽다고 생각했습니다.

컬러 플러그인은 마이클 레게버나는 다음과 같이 재현한다 :

// main function to process the fade request //
function colorFade(id,element,start,end,steps,speed) {
  var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
  var target = document.getElementById(id);
  steps = steps || 20;
  speed = speed || 20;
  clearInterval(target.timer);
  endrgb = colorConv(end);
  er = endrgb[0];
  eg = endrgb[1];
  eb = endrgb[2];
  if(!target.r) {
    startrgb = colorConv(start);
    r = startrgb[0];
    g = startrgb[1];
    b = startrgb[2];
    target.r = r;
    target.g = g;
    target.b = b;
  }
  rint = Math.round(Math.abs(target.r-er)/steps);
  gint = Math.round(Math.abs(target.g-eg)/steps);
  bint = Math.round(Math.abs(target.b-eb)/steps);
  if(rint == 0) { rint = 1 }
  if(gint == 0) { gint = 1 }
  if(bint == 0) { bint = 1 }
  target.step = 1;
  target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
  var target = document.getElementById(id);
  var color;
  if(target.step <= steps) {
    var r = target.r;
    var g = target.g;
    var b = target.b;
    if(r >= er) {
      r = r - rint;
    } else {
      r = parseInt(r) + parseInt(rint);
    }
    if(g >= eg) {
      g = g - gint;
    } else {
      g = parseInt(g) + parseInt(gint);
    }
    if(b >= eb) {
      b = b - bint;
    } else {
      b = parseInt(b) + parseInt(bint);
    }
    color = 'rgb(' + r + ',' + g + ',' + b + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
    target.r = r;
    target.g = g;
    target.b = b;
    target.step = target.step + 1;
  } else {
    clearInterval(target.timer);
    color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
  }
}

// convert the color to rgb from hex //
function colorConv(color) {
  var rgb = [parseInt(color.substring(0,2),16), 
    parseInt(color.substring(2,4),16), 
    parseInt(color.substring(4,6),16)];
  return rgb;
}

따라서 누군가가 해당 ID를 즉시 추가하는 방법을 말해 줄 수 있거나 자바 스크립트를 대상 클래스로 변경하는 방법을 말해 줄 수 있다면 백만 감사합니다.

많은 감사,

1 월

Answer 1

그래서 당신은 평범합니다 <ul></ul> 그리고 모든 것을주고 싶습니다 <li> 독특한 ID? jQuery 명령을 시도하십시오 "각":

$("li").each(function(index, element){$(element).attr("id", index);});

이것은 모든 것에 대해 루프 할 것입니다 <li> 요소 및 모든 요소의 수치 인덱스 (jQuery가 찾은 요소 배열에서)를 "ID"속성으로 할당합니다.

Answer 2

jQuery를 사용하는 경우 이와 같은 구문을 사용하여 클래스별로 요소를 얻을 수 있습니다 (CSS 클래스가 'ClassName'이라고 가정합니다.

$(".className").mouseover(function(){
  alert("something");
});

신분증으로 동일한 작업을 수행하려면 jQuery 에서이 작업을 수행합니다.

$("#idVal").mouseover(function(){
  alert("something");
});