使用 Javascript 给出 Span ID(一个接一个）

Give Span ID (ONE BY ONE) using Javascript

本文关键字：一个 Span Javascript ID 给出 使用      更新时间：2023-09-26

>我有很多跨度列表，例如

<span id="current"> hello </span>
<span> is </span>
<span> anyone </span>
<span> here</span>

我正在使用 JavaScript 执行操作

document.onkeypress = function(evt) {
};

我希望我的span id="current"消失，下一个元素，即<span> is </span>得到一个id="current".

在这里演示

 var i = 1;
    document.onkeypress = function (evt) {
        var element = document.getElementById('current');
        alert(element.textContent);
        var sibling = element.parentNode.children;
        element.attributes.id.nodeValue = "newId" + i;
        sibling[i].id = "current";
        i++;
    };

我建议：

function idProgress (e) {
    var self = this,
        id = self.id,
        next = self.nextElementSibling;
    if (next === null) {
        // this assumes you don't want to remove the last element
        return false;
    }
    else {
        self.parentNode.removeChild(self);
        next.id = id;
        next.addEventListener(e.type, idProgress);
    }
}
var span = document.getElementById('current');
span.addEventListener('click', idProgress);

JS小提琴演示。

要逐个单击删除所有span元素(包括最后一个(，请执行以下操作：

function idProgress (e) {
    var self = this,
        id = self.id,
        next = self.nextElementSibling;
    self.parentNode.removeChild(self);
    if (next !== null) {
        next.id = id;
        next.addEventListener(e.type, idProgress);
    }
}
var span = document.getElementById('current');
span.addEventListener('click', idProgress);

JS小提琴演示。

使用keypress而不是click(我在第一次阅读问题时忽略了这一点(：

function idProgress (e) {
    var self = this.getElementById('current'),
        id = self.id,
        next = self.nextElementSibling,
        key = e.which;
    if (key !== 110 || next === null) {
        return false;
    }
    else {
        self.parentNode.removeChild(self);
        next.id = id;
    }
}
document.addEventListener('keypress', idProgress);

JS小提琴演示。

或：

function idProgress(e) {
    var self = this.getElementById('current'),
        id = self.id,
        next = self.nextElementSibling,
        key = e.which;
    if (key == 110) {
        self.parentNode.removeChild(self);
        if (next !== null) {
            next.id = id;
        }
    }
}
document.addEventListener('keypress', idProgress);

JS小提琴演示。

引用：

  • element.addEventListener() .
  • event.which .
  • nextElementSibling .
  • parentNode .
  • removeChild() .

Vanilla JavaScript：

document.onkeypress = function( e ) {
    var
        outboundEl = document.getElementById('current'),
        nextEl = outboundEl.nextElementSibling;
    // remove the #current element from the DOM but keep a reference to it
    outboundEl = outboundEl.parentNode.removeChild(outboundEl);
    // make sure we only grab a reference to a span
    if( nextEl && nextEl.tagName.toLowerCase() === 'span' ) {
        nextEl.id = outboundEl.id;
    }
};

下面是一个演示：http://jsfiddle.net/PSgQ2/

为什么不使用 JQuery 来实现这一点。将一个类分配给所有相关标签，如"class="deactiveSpan"，并将一个span元素指定为class="activeSpan"。现在你可以得到这两种类型的元素，并使用jQuery轻松处理它。

相关文章：