تحقق مما إذا كان الجدول TR يحتوي على فئة ثم قم بإزالة وإضافة فئة جديدة في حدث Hover

Question

أحاول تسليط الضوء على صفوف الجدول على تحوم الماوس. يحتوي كل صف (TR) على فئة إما "حتى" أو "غريبة" بالفعل. لذلك ، لتسليط الضوء على الصف على تحوم الماوس ، أحتاج إلى إزالة فئة CSS "حتى" أو "غريب" من الصف أولاً. من فضلك خذ الكثير من السيناريو الخاص بي:

$('tr').hover(function() {

  if ($('this').hasClass('even')) {
    $(this).removeClass('even');
    $(this).addClass('rowhover');
  }

  else {
    $(this).removeClass('odd');
    $(this).addClass('rowhover');
  }
},
function() {
  $(this).removeClass('rowhover');
});

لكنها لا تعمل. هل يمكنك توجيه الخطأ لي؟ شكرًا لك.

تحديث 1:

لقد استخدمت هذا toggleclass liket هذا

$("tr").hover(function() {
$(this).toggleClass("rowhover");
});

ثم استخدمت Firebug لتفقد العنصر ، حصلت TR على فئة مثل هذا:

<tr class="even rowhover"> where it should be <tr class="rowhover">

نفس النتيجة إذا استخدمت STH مثل هذا:

$('tr').hover(function() {

    $(this).addClass('rowhover');
    },
 function() {
    $(this).removeClass('rowhover');        
});

CSS الخاص بي لفئة Rowhover

.rowhover {background:green !important;} 

تحديث 2:

حاولت اقتراح جوستين جونسون:

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
        },
    function() {
     $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
  });

لقد تفقدت العنصر مع Firebug ، وإليك النتيجة:

//Notice the space in the class=" rowhover" when mouse hover
     <tr class=" rowhover">

 //Notice the space in the class=" even", class=" odd" when mouse out
 <tr class=" even"> or <tr class=" odd">

تحديث 3: إنه يعمل!

تابعت منشورًا في jQuery - مظاهرات وأمثلة من المكونات الإضافية لكنني كنت بحاجة إلى إضافة! من المهم تجاوز النمط السابق مثل هذا:

tr.overRow td { background-color:#FFFF99 !important; border :2px; }

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

// Adds "over" class to rows on mouseover
$(".tablesorter tr").mouseover(function() { $(this).addClass("overRow"); });
// Removes "over" class from rows on mouseout
$(".tablesorter tr").mouseout(function() { $(this).removeClass("overRow"); }); 

الآن ، كل شيء يعمل كما هو مخصص. شكرا لكم جميعا على الاقتراح. آسف لعدم ذكره في المقام الأول أنني أستخدم البرنامج المساعد jQuery Tablesorter ، وأريد فقط تسليط الضوء على الصف في حدث Hover.

:د

Answer 1

يتغيرون

if ($('this').hasClass('even')) {

ل

if ($(this).hasClass('even')) {

قم بإزالة الاقتباسات حولها this. أيضًا ، تحتاج إلى إعادة تعيين حالة الفصل الأصلي و يمكنك سلسلة وظائفك:

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
},
function() {
    $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});

Answer 2

بادئ ذي بدء ، حاول تقطيع الأحداث الخاصة بك.

$(this).removeClass('even').addClass('rowhover');

ثانياً ، لماذا إزالة تلك الفئات؟ إذا قمت ببساطة بإضافة الفصل ثم تجاوزته في CSS عن طريق الجمع بين أسماء الفصول:

.even { background:black; }
.even.rowhover { background:blue; }

Answer 3

يمكنك فقط ترك الفصل "حتى" و "Odd" وإضافة/إزالة الفئة "Rowhover" على Hover (على سبيل المثال ، سيكون لدى TR المسلح الفصول "حتى" و "Rowhover"). اضبط لون الخلفية (أو أي شيء تستخدمه لتسليط الضوء على الصف) في "Rowhover" ليكون "مهمًا" في CSS لتجاوز "و" Odd ".

وبهذه الطريقة ، لا يتعين عليك الاهتمام بالفئة التي كان لدى TR من قبل وببساطة رمزك كثيرًا ، يمكنك فقط الاتصال "بإضافة Rowhover" على Hover وإزالته على الماوس.

Answer 4

هل تستخدم JavaScript العادية "النقية"؟ يبدو لي كما لو كنت ستستخدم بعض جافا سكريبت (مثل موتوول).

Answer 5

(كبديل) بدلاً من استخدام jQuery لهذه الوظيفة ، ما عليك سوى استخدام وظائف CSS المضمنة

بدلاً من استخدام فئة Rowhover في استخدام CSS الخاص بك

tr:hover
    {
        ...styles here
    }

Answer 6

يبدو أن هذا السطر من الكود الخاص بك خاطئ:

if ($('this').hasClass('even')) {

أنت تقتبس this الكلمة الرئيسية ، جرب هذا:

if ($(this).hasClass('even')) {