使用jQuery設置'font-size'在選定文本的最后一個元素上不起作用
[英]Setting 'font-size' with jQuery not working on last element of the selected Text
問題描述
我正在嘗試更改所有選定文本的font-size 。 它工作正常，但我無法更改數組中最后一個元素的字體。
下面是我的代碼：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> $(document).ready(function(){ $('span').mouseup(function(){ var range = window.getSelection().getRangeAt(0); content = range.cloneContents(); var select = content.querySelectorAll('span'); updateFont(select); }); }); function updateFont(selectedText){ var spans = document.getElementsByTagName('span'); for( i=0;i < spans.length;i++){ for( j=0;j < selectedText.length;j++){ var id = spans[i].id; var selectedId = selectedText[j].id; var text = spans[i].innerHTML; var selectedinnerText = selectedText[j].innerHTML; if(i === spans.length-1) { checkLast(id,text,selectedText); } if(id === selectedId){ if(text === selectedinnerText){ $("#"+id).css("font-size",10+"px"); } } } } } function checkLast(id,text,selectedText) { for( j=0;j < selectedText.length;j++){ var selectedId = selectedText[j].id; var selectedinnerText = selectedText[j].innerHTML; alert(id + " " + selectedId + " " + selectedinnerText + " " + text); if(id === selectedId){ if(text === selectedinnerText){ $("#"+id).css("font-size",10+"px"); } } } } </script> </head> <body> <span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span> <p></p> </body> </html>
1 個解決方案
解決方案1
2 已采納 2016-04-09 08:16:40
這是因為最后一個元素的末尾有一個空格。
更改： if(text === selectedinnerText){
至：
if(text.trim() === selectedinnerText.trim()){ //eliminate spaces before and after the text, incase the highlighting goes over the element.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> $(document).ready(function(){ $('span').mouseup(function(){ var range = window.getSelection().getRangeAt(0); content = range.cloneContents(); var select = content.querySelectorAll('span'); updateFont(select); }); }); function updateFont(selectedText){ var spans = document.getElementsByTagName('span'); for( i=0;i < spans.length;i++){ for( j=0;j < selectedText.length;j++){ var id = spans[i].id; var selectedId = selectedText[j].id; var text = spans[i].innerHTML; var selectedinnerText = selectedText[j].innerHTML; if(i === spans.length-1) { checkLast(id,text,selectedText); } if(id === selectedId){ if(text.trim() === selectedinnerText.trim()){ $("#"+id).css("font-size",10+"px"); } } } } } function checkLast(id,text,selectedText) { for( j=0;j < selectedText.length;j++){ var selectedId = selectedText[j].id; var selectedinnerText = selectedText[j].innerHTML; alert(id + " " + selectedId + " " + selectedinnerText + " " + text); if(id === selectedId){ if(text.trim() === selectedinnerText.trim()){ $("#"+id).css("font-size",10+"px"); } } } } </script> </head> <body> <span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span> <p></p> </body> </html>
jQuery：更改字體大小不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.