Я добавляю еще один ответ здесь, потому что я считаю, что мой оригинальный ответ действительно отвечает на ваш вопрос, как указано (как получить соседние символы).
Однако после того, как вы опубликовали свой код, я вижу, что вы хотите создатьлупа.Это своего рода ловушка для рыбы, поэтому я переписал ваш код.
Причина в том, что он отличается тем, что вам нужно использовать указатель мыши для получения отдельных букв, а это означает, что вы должны заключать отдельные буквы в теги.Размещенный код делает это (по сути, рабочая версия вашего кода.) Обратите внимание, я не связывался с вашим перетаскиваемым объектом.Если у вас возникли проблемы с этим временем для нового вопроса.
<style type="text/css">
body { font-family:"Tiresias PCfont Z"; /* font-size:15px; */ background: #fff; line-height:1.1em; }
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable { margin-bottom:20px; }
#MagDrag {background-image:url(controls/MagLens1.png); width: 236px; height: 73px; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; display:none;}
#magnifyView { width: 90px;
background-image:url(controls/MagLens1.png);width: 212px;height: 50px; white-space: nowrap; font-size: 40px; font-weight:bold;
}
.onText { color:#990000;}
</style>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.java2s.com/Tutorial/JavaScriptDemo/js/ui/ui.core.js"></script>
<script type="text/javascript" src="http://www.java2s.com/Tutorial/JavaScriptDemo/js/ui/ui.draggable.js"></script>
<script type="text/javascript" charset="utf-8">
//custom "magnify" function
var mag = function(){
return {
add: function(){
//encapsulate #article into individual spans
//why? mouseover events are triggered by tags, not individual letters
var str = $('#article').text();
var output = '';
for(var i = 0; i<str.length; i++){
output += '<span>' + str.substr(i, 1) + '</span>';
}
//replace #article with altered html
$('#article').html(output);
//add the mouseover
$('#article span').mouseover(function(){
//note both these selectors could be way more efficient
//however this should get you started...
var leading = $(this).prev().add($(this).prev().prev()).add($(this).prev().prev().prev());
var trailing = $(this).next().add($(this).next().next()).add($(this).next().next().next());
$('#magnifyView').html(
$(leading).text() +
'<span class="onText">' + $(this).text() + '</span>' +
$(trailing).text()
);
});
$('#containment-wrapper').show();
},
remove: function(){
$('#article span').unbind('mouseover');
$('#article').html($('#article').text());
$('#containment-wrapper').hide();
}
}
}();
// jquery $ function load
$(document).ready(function(){
$('.addmag').click(function(){
mag.add();
});
$('.removemag').click(function(){
mag.remove();
});
$("#magnifyView").draggable({ containment: '#containment-wrapper', scroll: false, axis: 'x' });
});
</script>
Примечание. Чтобы добавить или удалить функцию лупы, вам нужно нажать «addmag» или «removemag».(Это сделано для того, чтобы продемонстрировать, как инкапсулировать строку с помощью jquery и основного цикла, а также как вернуть исходную строку, сохранить пробелы и т. Д.)
Надеюсь, что это поможет!