纯Javascript获取所有span元素，但通过定义的类进行特定的编辑_Javascript_Html_Class

纯Javascript获取所有span元素，但通过定义的类进行特定的编辑

javascript html class

纯Javascript获取所有span元素，但通过定义的类进行特定的编辑,javascript,html,class,Javascript,Html,Class,我只需要纯javascript帮助，下面的代码就可以像我的文章标题中提到的那样工作 jsfiddle：完整来源粘贴如下： <!DOCTYPE html> <script> function init_events(){ if (!document.getElementsByTagName){ return; } 函数init_events（）{ 如果（！document.getElementsByTagName）{return；} 把所有的跨度都放在这里 var

我只需要纯javascript帮助，下面的代码就可以像我的文章标题中提到的那样工作

jsfiddle：

完整来源粘贴如下：

<!DOCTYPE html>
<script>
function init_events(){

if (!document.getElementsByTagName){ return; }


函数init_events（）{
如果（！document.getElementsByTagName）{return；}

把所有的跨度都放在这里

var divReports = document.getElementById('reports');
divReports.innerHTML = '<ol><b>Reports:</b>';

var allSpans = document.getElementsByTagName('span');

// Not getting or alerting values
var allCanEditSpans = function(){
if(allSpans.className == 'canEdit'){
alert("canEdit!");
}
};

// Not getting or alerting values
var allCant_EditSpans = function(){
if(allSpans.className == 'cant_Edit'){
alert("cant_Edit!");
}
};

var divReports=document.getElementById（'reports'）；
divReports.innerHTML='Reports:'；
var allspan=document.getElementsByTagName（'span'）；
//没有获取或警告值
var allcaneditspands=function（）{
如果（allSpans.className=='canEdit'）{
警惕（“canEdit！”）；
}
};
//没有获取或警告值
var allCant_editspands=函数（）{
如果（allSpans.className==“无法编辑”）{
警报（“无法编辑！”）；
}
};

添加事件

if (document.addEventListener) { // For all browsers minus IE

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

if (activeSpan.className == 'canEdit') {

activeSpan.addEventListener('mouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';

divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span
});

activeSpan.addEventListener('mouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.addEventListener('click', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}

divReports.innerHTML += '</ol>';

}

}else {  // For the always BUGGY or Lonely IE!

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

if（document.addEventListener）{//适用于除IE以外的所有浏览器
检测到divReports.innerHTML+='Total'+allspan.length+'跨距。'；
检测到divReports.innerHTML+='Total'+allcaneditspands.length+'可编辑范围。'；
divReports.innerHTML+='Total'+allCant_EditSpans.length+'检测到不可编辑的跨距。'；
divReports.innerHTML+=''；
divReports.innerHTML+=“活动范围：”；
对于（var i=0；i开始
var span=document.getElementsByTagName（“span”）；
对于（变量i=0；i
getElementsByTagName
的结果是一个HTMLCollection
，它没有className
属性
var allCanEditSpans = function(){
    var count = 0;
    for(var i = 0; i < allSpans.length; i ++) {
        if(allSpans[i].className === 'canEdit') {
            count ++;
        }
    }
    return count;
}();

使用新的选择器API：
var allCanEditSpans = document.querySelectorAll('span.canEdit').length;


编辑：对于事件侦听器部分，您需要创建一个闭包
if (activeSpan.className == 'canEdit') {

    (function(aSpan) {
        aSpan.addEventListener('mouseover', function (e) {
        aSpan.style.cursor = 'pointer';
        aSpan.title = 'Click to Edit.';
        aSpan.style.border = '1px solid red';

        divReports.innerHTML += '<li>On Mouse Active Span: '+aSpan.id +'</li>'; // Debug - Why it always takes the last span
    })(activeSpan);
}

if（activeSpan.className=='canEdit'）{
（功能（aSpan）{
aSpan.addEventListener（'mouseover'，函数（e）{
aSpan.style.cursor='pointer'；
aSpan.title='单击以编辑'；
aSpan.style.border='1px纯红'；
divReports.innerHTML+='在鼠标活动Span:'+aSpan.id+''；//调试-为什么总是使用最后一个Span
})（活动范围）；
}

干得好！谢谢你。请再说一件事。为什么它总是跳到最后一个span id？我需要鼠标下的当前span成为活动span
进行编辑，如果你可能注意到它跳到最后一个元素上的一个剩余部分。谢谢。你的答复被接受，我也会向上投票。我用多个眉毛进行了测试ers，但IE8既有Array.prototype.filter.call
功能，也有正常功能，报告未定义的
。是的，兄弟，Array.prototype.filter
只在较新的浏览器中工作（我在文章中提到过）.Thax很多兄弟。请检查更新的jfiddle。按钮不能调用它们的onclick
函数。这个更新在IE8中根本不起作用！我用chrome/Firefox/opera进行了测试，一切都很好！你的想法很好。问题是大多数帐户用户都是IE8。这是为了数据网格
最近与AJAX混合使用R
divReports.innerHTML += '<li>Total '+ allCanEditSpans + ' Editable spans detected.</li>';

var allCant_EditSpans = function() {
    return Array.prototype.filter.call(allSpans, function(span) {
        return span.className === 'cant_Edit';
    }).length;
}();

var allCanEditSpans = document.querySelectorAll('span.canEdit').length;

if (activeSpan.className == 'canEdit') {

    (function(aSpan) {
        aSpan.addEventListener('mouseover', function (e) {
        aSpan.style.cursor = 'pointer';
        aSpan.title = 'Click to Edit.';
        aSpan.style.border = '1px solid red';

        divReports.innerHTML += '<li>On Mouse Active Span: '+aSpan.id +'</li>'; // Debug - Why it always takes the last span
    })(activeSpan);
}