it-swarm.dev

إضافة فئة مع جافا سكريبت

أنا أكتب بعض الفانيلا جافا سكريبت لإنشاء قائمة التنقل لطيفة. أنا عالق في إضافة فصل نشط.

إنني أتلقى عناصر حسب اسم الفصل وليس معرف. تعمل التعليمة البرمجية أدناه إذا تم استبدالها بمعرف ، ومع ذلك ، أحتاج إليها للتطبيق على أكثر من عنصر واحد.

HTML

<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />

JS

var button = document.getElementsByClassName("navButton");

button.onmouseover = function() {
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png");
}

لا توجد إجابات تحتوي على مسج من فضلك.

36
vincentieo

document.getElementsByClassName إرجاع قائمة عقدة. لذلك يجب عليك تكرار القائمة وربط الحدث بالعناصر الفردية. مثله...

var buttons = document.getElementsByClassName("navButton");

for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.setAttribute("class", "active");
        this.setAttribute("src", "images/arrows/top_o.png");
    }
}
44
mohkhan

في مقتطفك ، button هي مثيل NodeList ، لا يمكنك إرفاق مستمع الحدث مباشرة ، ولا يمكنك تغيير خصائص العناصر 'className مباشرة.
أفضل رهان هو تفويض الحدث:

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
    }
},false);

بالطبع ، أعتقد أنه يجب إزالة فئة active بمجرد اندلاع الحدث mouseout ، قد تفكر في استخدام مفوض ثان لذلك ، لكنك ) يمكن فقط إرفاق معالج حدث بالعنصر الذي يحتوي على فئة active:

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var oldSrc, target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
        oldSrc = target.getAttribute('src');
        target.setAttribute('src', 'images/arrows/top_o.png');
        target.onmouseout = function()
        {
            target.onmouseout = null;//remove this event handler, we don't need it anymore
            target.className = target.className.replace(/\bactive\b/,'').trim();
            target.setAttribute('src', oldSrc);
        };
    }
},false);

هناك مجال للتحسينات ، باستخدام هذا الرمز ، لكنني لن أستمتع بكل المتعة هنا ؛-).

تحقق من الكمان هنا

7
Elias Van Ootegem

إليك طريقة مقتبسة من Jquery 2.1.1 والتي تأخذ عنصر dom بدلاً من كائن jquery (لذلك jquery غير مطلوبة). يتضمن اختبارات النوع وتعبيرات regex:

function addClass(element, value) {
    // Regex terms
    var rclass = /[\t\r\n\f]/g,
        rnotwhite = (/\S+/g);

    var classes,
        cur,
        curClass,
        finalValue,
        proceed = typeof value === "string" && value;

    if (!proceed) return element;

    classes = (value || "").match(rnotwhite) || [];

    cur = element.nodeType === 1
        && (element.className
                ? (" " + element.className + " ").replace(rclass, " ")
                : " "
        );

    if (!cur) return element;

    var j = 0;

    while ((curClass = classes[j++])) {

        if (cur.indexOf(" " + curClass + " ") < 0) {

            cur += curClass + " ";

        }

    }

    // only assign if different to avoid unneeded rendering.
    finalValue = cur.trim();

    if (element.className !== finalValue) {

        element.className = finalValue;

    }

    return element;
};
2
Aleksandr Albert

getElementsByClassName() تقوم بإرجاع HTMLCollection حتى تتمكن من تجربة ذلك

var button = document.getElementsByClassName("navButton")[0];

تحرير

var buttons = document.getElementsByClassName("navButton");
for(i=0;buttons.length;i++){
   buttons[i].onmouseover = function(){
     this.className += ' active' //add class
     this.setAttribute("src", "images/arrows/top_o.png");
   }
}
0
Arda

أحب استخدام وظيفة "foreach" مخصصة لأنواع هذه الأشياء:

function Each( objs, func )
{
    if ( objs.length ) for ( var i = 0, ol = objs.length, v = objs[ 0 ]; i < ol && func( v, i ) !== false; v = objs[ ++i ] );
    else for ( var p in objs ) if ( func( objs[ p ], p ) === false ) break;
}

(لا أتذكر المكان الذي وجدت فيه الوظيفة أعلاه ، لكنها كانت مفيدة للغاية.)

ثم بعد إحضار الكائنات الخاصة بك (إلى elements في هذا المثال) ، قم بذلك

Each( elements, function( element )
{
    element.addEventListener( "mouseover", function()
    {
        element.classList.add( "active" );
        //element.setAttribute( "class", "active" );
        element.setAttribute( "src", "newsource" );
    });

    // Remove class and new src after "mouseover" ends, if you wish.
    element.addEventListener( "mouseout", function()
    {
        element.classList.remove( "active" );
        element.setAttribute( "src", "originalsource" );
    });
});

classList هي طريقة بسيطة للتعامل مع فئات العناصر. فقط يحتاج إلى شيم لبضعة متصفحات. إذا كان يجب عليك استخدام setAttribute يجب أن تتذكر أن كل ما تم تعيينه به سوف الكتابة فوق القيم السابقة.

تحرير: نسيت أن أذكر أنك تحتاج إلى استخدام attachEvent بدلاً من addEventListener في بعض IE الإصدارات. اختبار مع if ( document.addEventListener ) {...}.

0
ojrask

هناك بنية في forEach حلقة للصفيف في ECMAScript 5th Edition.

var buttons = document.getElementsByClassName("navButton");

Array.prototype.forEach.call(buttons,function(button) { 
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png"); 
});
0
ketan

ما عليك سوى إضافة اسم فئة إلى بداية الوظيفة وتكون الوسائط الثانية والثالثة اختيارية ويتم السحر لك!

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;

}
0
Yoni