Question

所以我真的很难尝试理解如何使用next（）方法以及addClass和removeClass方法。我想要做的是将一个类从一个表格单元格移动到该行中的下一个单元格。到目前为止我只有一行代码，因为我真的不知道从哪里开始，所以我粘贴了我的psudo代码：

document.getElementsByClassName(classname) //Get element with classname
move the class to the next <td>
remove the class from the current <td>

我90％确定这可以用.next（）和addClass（），removeClass（）来实现但我似乎无法找到正确使用的任何有用信息这是我的第一篇文章，我目前正在处理脑震荡综合征，因此大脑可能无法正常运作哈哈

Answer 1

您可以通过JavaScript实现此目的：

var el = document.querySelector('.active');

if(el) {
    var nextEl = el.nextElementSibling;
    nextEl.setAttribute('class','active');

    el.setAttribute('class','');
}

这是live example

Answer 2

你考虑过jQuery吗？

$('className').removeClass('className').next('td').addClass('className');

Javascript就是

var x = document.getElementByClass("className");
var y = document.getElementByClass("className").nextSibling();
x.className = "";
y.className = "className";

请记住，使用类的元素不一定是唯一的，使用ID 的元素应该是。

Answer 3

jQuery方法可能是：

$('.className').eq(0).removeClass('className').next('td').addClass('className');

在$('...')中，参数是选择器，就像CSS选择器字符串一样 - 因此我们需要在类名前加上点。

另一方面，.removeClass('...')和.addClass('...')的论点是 classname 。它是不 选择器，不应该有点。

在原生JS中，事情有点不同。

首先，我们定义了两种方法，用于添加和删除特定类而不更改其他类。（这些函数是我在这里找到的Craig Buckler脚本的自定义：http://www.sitepoint.com/jquery-vs-raw-javascript-2-css3-animation/）

function addClass(node, class) { if ((" " + node.className + " ").indexOf(" "+class+" ") >= 0) { node.className += " " + class; } } function removeClass(node, class) { var classNameString = " " + node.className + " "; if (classNameString .indexOf(" " + class + " ") >= 0) { node.className = classNameString .replace(" " + class + " ", " ") .trim(); } }

然后我们必须得到我们要改变的元素：

var currentElement = document.getElementsByClassName('yourClassName')[0], nextElement = currentElement.nextElementSibling;

理论上这很好，但在我们使用新函数之前，我们需要检查nextElement是否真的存在，否则脚本会失败。在这里，我们还会检查nextElement的标记（此处我们使用 div 但 td 也可以正常工作 - 只要您浏览td个元素）。

if (nextElement !== null && nextElement !== undefined && nextElement.tagName.toLowerCase() === "div") { removeClass(currentElement, 'yourClassName'); addClassName(nextElement, 'yourClassName'); }

本机JS方法可能不太灵活，但执行速度比jQuery等效。但是如果你已经加载了jQuery，我们的JS方法可能是多余的。另外我建议看一些有关JS主题的教程，然后是jQuery。编写没有基础知识的代码是非常艰巨的，调试将非常令人沮丧。

我分叉@ Maxali的小提琴并应用了一些变化： https://jsfiddle.net/z1357e4f/

在表上使用.next（）函数和add / removeClass（）函数

3 个答案: