0

我只需要纯 javascript 帮助，下面的代码就可以按照我的帖子标题中提到的那样工作。

jsfiddle：演示

完整来源粘贴在下面：

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

if (!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!");
}
};

添加事件

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>';

检查它们是否属于 canEdit 类 

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

activeSpan.attachEvent('onmouseover', 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.attachEvent('onmouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.attachEvent('onclick', 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>';

}


// DEBUG TEST -> START

var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'canEdit') {
spans[i].style.backgroundColor = '#999dee';
}

if (spans[i].className == 'cant_Edit') {
spans[i].style.backgroundColor = '#555dee';
}

}

// DEUG TEST <- END
}



</script>

<span id="span_1" class="canEdit">I am editable!</span>
<br>
<span id="span_2" class="cant_Edit">I am not editable!</span>
<br>
<span id="span_3" class="canEdit">I am editable!</span>
<br>
<hr>
<p>Not span</p>

<table border="1">
<tr>
<td><span id="span_td1" class="cant_Edit">I am not editable!</span></td>
<td><span id="span_td2" class="canEdit">I am editable!</span></td>
<td><span id="span_td3" class="cant_Edit">I am not editable!</span></td>
<td>Not span</td>
</tr>
</table>
<hr>

<div id="reports">
</div>

<script>
init_events();
</script>
4

1 回答 1

1

// 不获取或警告值

var allCanEditSpans = function(){
  if(allSpans.className == 'canEdit') {
...

var allSpans = document.getElementsByTagName('span'); //allSpans is an HTMLCollection

的结果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;
}();

并像这样使用它：

divReports.innerHTML += '<li>Total '+ allCanEditSpans + ' Editable spans detected.</li>';

对于较新的浏览器，您可以使用Array.prototype.filter如下：

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

使用新的选择器 API：

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

更新了 jsFiddle 演示

编辑：对于事件侦听器部分，您需要创建一个闭包

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);
}

jsFiddle 演示

于 2013-08-06T08:17:01.193 回答