JavaScript — та же функция не дает тот же результат после перезагрузки
В общем, моя страница представляет собой магазин, поэтому контент генерируется с помощью короткого кода php следующим образом:
<?php get_header(); ?>
<div id="main-content">
<div id="page-content">
<?php
echo do_shortcode('[products limit="20" columns="4" category="t-shirt"]');
?>
</div>
</div>
<?php get_footer(); ?>
<script>$(document).ready(linebreak)</script>
Так что это дает мне базовую страницу, подобную этой, где мой контент представляет собой список элементов:
<html>
<head></head>
<body>
<div id="main-content">
<div id="page-content">
<ul class="my-list">
<li class="my-element">
<img>
<h2>A title</h2>
</li>
<li class="my-element">
<img>
<h2>A title</h2>
</li>
</ul>
</div>
</div>
<footer></footer>
</body>
</html>
<script>$(document).ready(linebreak)</script>
На самом деле их больше 20, но вы можете видеть, как выглядит моя страница. Я использую функцию jquery разрыва строки, чтобы проверить, есть ли в заголовке h2 разрыв строки, потому что я этого не хочу. Если есть разрыв строки, он просто сохраняет 20 первых символов и добавляет «…» в конце. Это работает довольно хорошо, за исключением того, что есть один или h2, которые не всегда меняются в зависимости от моих перезагрузок. У них есть разрыв строки, но когда я перезагружаю свою страницу несколько раз, иногда функция меняет их, а иногда нет. Это только один или два конкретных h2 и всегда одинаковые. Почему моя функция не дает одинаковых результатов при каждом запуске моей страницы?
В случае, если это может помочь, вот функция в моем script.js, которая включена в заголовок:
function linebreak(){
$("#main-content #page-content .woocommerce ul li h2").each(function(index){
var lheight = Math.round(parseFloat($("#main-content #page-content ul li h2").css("line-height")));
var title = $(this).text().trim().substring(0, 100).split("").slice(0, 21).join("") + "...";
if ($(this).height() > lheight){
$(this).html(title);
}
});
};
Решение
У вас есть изображение того, что вы хотите? Не будет ли проще использовать CSS для управления слишком длинными заголовками?
Следующий код автоматически поместит многоточие, если заголовок слишком длинный, при условии, что вы установили ширину для элемента h2.
Например.
h2 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Другие решения
Ваш сценарий должен быть в верхней части документа, поэтому вам нужно найти где<?php get_header(); ?> генерируется. Это обычно header.php
Вы должны ждать, пока дом полностью загрузится
$( document ).ready(function() {
linebreak();
});
Вы также можете проверить header.php или footer.php, чтобы удалить код, если ваша структура темы проста
detector