Чем можно заменить
при переводе страницы на английский? Решено, спасибо
При переводе с помощью jQuery text() js заменяет слова на нужные, но не учитывает перенос текста, который стоит у меня через <br>.
Чем можно заменить <br> или как передать html-тег <br> с помощью jquery?
var arrLang = {
"en":{"social":"Vkontakte is the best social network"},
"ru":{"social":"Вконтакте это самая лучшая социальная сеть"}
}
let select_current = document.querySelector(".select_current");
let sel_body = document.querySelector(".select_body");
let sel_item = document.querySelectorAll(".select_item");
let sel_input = document.querySelector(".select_input");
select_current.addEventListener("click", (event)=>{
sel_body.classList.toggle("is_active");
})
sel_item.forEach(elem => {
elem.addEventListener("click", ()=>{
let elemValue = elem.getAttribute("data-value");
let elemText = elem.textContent;
sel_input.value = elemValue;
select_current.textContent = elemText;
selectBodyHide();
})
})
let selectBodyHide = () =>{
sel_body.classList.remove("is_active");
};
$(function(){
$(".select_item").click(function(){
var lang = $(this).attr("data-value");
$(".lang").each(function(index, element){
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
});
h3{
font-size: 16px;
font-family: "Roboto";
}
.select{
display: flex;
font-family: "Circe";
font-size: 16px;
line-height: 21px;
color: black;
}
.select_header{
display: flex;
cursor: pointer;
border: 1px solid black;
}
.select_current{
padding: 8px;
position: relative;
}
.select_body{
display: none;
flex-direction: column;
border-top:0;
position: absolute;
margin-top: 40px;
}
.select_item{
line-height: 24px;
padding: 8px;
font-size: 16px;
color: black;
}
.select_item:hover, .select_item:focus{
cursor:pointer;
text-shadow: 0 0 2px white;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.is_active{
display:flex;
box-shadow: 0 0 5px black;
border-radius: 10px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="lang" key="social">Вконтакте это самая лучшая<br>социальная сеть</h3>
<div class="select">
<input type="hidden" name="number" class="select_input">
<div class="select_header">
<div class="select_current">Русский</div>
</div>
<div class="select_body">
<div class="select_item" data-value="en">English</div>
<div class="select_item" data-value="ru" >Русский</div>
</div>
</div>