День добрый! Имеется код:
$(document).ready(function(){
var json_content=[
{
"phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень."
},
{
"phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?"
}
];
$(function(){
var rand = Math.floor(Math.random() * json_content.length);
$(".joke").html(json_content[rand].phrase);
});
});
Но при выводе на html страницу последней фразы получается:
Вывеска над кафе — '<Мы открылись>'. Что-то не так. Где же ''?
Хотя должно быть:
Вывеска над кафе — '<Мы открылись>'. Что-то не так. Где же '</Мы открылись>'?
Как решить эту проблему?
jQuery зло.
const json_content=[{
"phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень."
},{
"phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?"
}];
const rand = Math.floor(Math.random() * json_content.length);
document.querySelector(".joke").innerText = json_content[rand].phrase;
<div class='joke'></div>
Если всё же хотите использовать jQuery, то вместо метода html возьмите метод text, он экранирует всё необходимое
У вас проблема в том что вы пытаетесь текст добавить как кусок html
разметки, и во второй части вашего json
есть слеш не экранированный сразу после символа <
, и jquery
пытается создать из нее html
разметку. Если хотите поставить текст то нужно использовать метод .text()
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="joke">
</div>
<script>
$(document).ready(function(){
var json_content=[
{
"phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень."
},
{
"phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?"
}
];
$(function(){
var rand = Math.floor(Math.random() * json_content.length);
$(".joke").text(json_content[rand].phrase);
});
});
</script>
А если все таки у вас в тексте может быть и html
разметка и вам нужно использовать метод .html()
то надо разделить хотя бы пробелом символ <
и /
или символ <
написать кодом вот так <
. Вот пример с методом .html()
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="joke">
</div>
<script>
$(document).ready(function(){
var json_content=[
{
"phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень."
},
{
"phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c /Мы открылись\u003e'?"
}
];
$(function(){
var rand = Math.floor(Math.random() * json_content.length);
$(".joke").html(json_content[rand].phrase);
});
});
</script>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Здравствуйте, прошу помощи, объяснений, примеров) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности...
Если заполняется один из блоков, то оба блока принимают наибольшую высотуВариант с фиксированной высотой не подойдет
Нужно добавить атрибут defer при загрузке страницы всем <script>-амТаким образом хочу ускорить загрузку страницы