我在 js/custom.js
中创建了一个函数.
基本上,它通过添加一类 articleAlign
来为我在 wordpress 中对齐帖子, 会在文章标题和下面的摘录之间插入内容以创建更大的间隙,只有在文章标题不超过一行时才需要这样做,因为对于占两行的标题,它会推送文章摘录下来。我希望一行的文章标题和下面的摘录之间有更大的间距,以便摘录的顶部全部对齐。
CSS
.articleAlign::after {
display:block;
height:55px;
content:"";
}
jQuery
(function($) {
function articleAlign() {
titleLength = $('.entry-title').children('a').text().length;
if(titleLength < 44) {
$('.entry-title').addClass('articleAlign');
}
}
articleAlign();
})(jQuery);
当然,这是我的 enqueue :
wp_enqueue_script('custom-js', get_template_directory_uri() .
'/js/custom.js', array('jquery'), '1.0.0', true);
请注意,我正在传递 true
对于 $in_footer
所以脚本就在 </body>
之前标签。 (所有内容都在一行中,在 Wordpress functions.php
中,就在 js/functions.js
的排队下方。)
为什么我的类(class)没有被添加?
最佳答案
jQuery 的 text
是一只奇怪的鸭子:与 jQuery 的所有其他 getter 不同,它只返回集合中 first 条目的相关值,它返回一个连接的字符串所有 集合中的条目。因此,一个可能的问题是存在多个 .entry-title
并且您得到的文本比您预期的要多。
查看一个随机的 Wordpress 站点,我看到有两个 .entry-title
元素,而不是一个,每个元素都包含标题。所以 $(".entry-title").children("a").text()
在这种情况下会返回一个字符串,其中包含标题的两个副本。
如果这就是您的情况,您可以使用 .eq(0)
或 .first()
只得到第一个。另请注意,$(".entry-title").children("a")
只是简单地写成 $(".entry-title > a")
。所以:
if ($(".entry-title > a").eq(0).text().length < 44) {
在您提出的评论中:
Should I loop my function for every article?
如果您希望将此应用到它们中的每一个,是:
(function($) {
$(".entry-title").each(function() {
var $this = $(this);
if ($this.children("a").first().text().length < 44) {
$this.addClass("articleAlign");
}
});
})(jQuery);
关于javascript - jQuery 在 Wordpress 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43510188/