純Javascript以獲得所有span元素，但可以通過定義的類特定編輯

我只需要純JavaScript幫助，以便在我的帖子標題中提到的以下代碼工作。純Javascript以獲得所有span元素，但可以通過定義的類特定編輯

的jsfiddle：demo

完整的源粘貼如下：

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

檢查，如果他們是一個C anEdit，則類

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>

來源

2013-08-06 samimi_it

//沒有得到或警報值

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;

Updated jsFiddle Demo

編輯：對於事件偵聽器的一部分，你需要創建一個封閉

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 Demo

來源

2013-08-06 08:17:01

好樣的！這次真是萬分感謝。還有一件事請。爲什麼它總是跳到最後一個跨度ID？如果您可能已經注意到它在最後一個元素上跳轉了剩餘，我需要鼠標下的當前跨度爲「activeSpan」進行編輯。欣賞它。您的回覆被接受，我也會Upvote。 –

兄弟，請檢查更新後的帖子。 –

我使用多種瀏覽器進行測試，但使用** IE8 **'Array.prototype.filter.call'和正常的函數，報告爲'undefined'。 –

純Javascript以獲得所有span元素，但可以通過定義的類特定編輯

回答

相關問題