jQuery : 5 개의 ID 추가 (클래스 대신)
-
03-07-2019 - |
문제
이 상황을 다루고 있습니다.
- 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 월
해결책
그래서 당신은 평범합니다 <ul></ul>
그리고 모든 것을주고 싶습니다 <li>
독특한 ID? jQuery 명령을 시도하십시오 "각":
$("li").each(function(index, element){$(element).attr("id", index);});
이것은 모든 것에 대해 루프 할 것입니다 <li>
요소 및 모든 요소의 수치 인덱스 (jQuery가 찾은 요소 배열에서)를 "ID"속성으로 할당합니다.
다른 팁
jQuery를 사용하는 경우 이와 같은 구문을 사용하여 클래스별로 요소를 얻을 수 있습니다 (CSS 클래스가 'ClassName'이라고 가정합니다.
$(".className").mouseover(function(){
alert("something");
});
신분증으로 동일한 작업을 수행하려면 jQuery 에서이 작업을 수행합니다.
$("#idVal").mouseover(function(){
alert("something");
});