javascript - JQuery通过拆分段落更改页面中的文本

Question

我有一个基于 wordpress 的网站，其中的小部件具有类似的标题

• 按类别浏览
• 购物车
• 通讯
• 社区民意调查
• ETC

现在，我想以蓝色显示每个小部件的第一个单词，以黑色显示剩余单词。
我怎么做？

（即浏览、购物、时事通讯、蓝色为黑色的社区）

我想，我们可以使用 jQuery 来做到这一点，但我不知道该怎么做。

编辑：

网站： http: //granitess.com/wp/

Answer 1

我首选的解决方案是使用 WordPress 挂钩来获取小部件标题。

function my_widget_title($title) {
    $parts = explode(" ", $title);
    $return = '<span class="first">' . array_shift($parts) . '</span>';
    if (sizeof($parts) > 0)
        $return .= implode(" ", $parts);
    return $return;
}

add_filter('widget_title', 'my_widget_title');

我还没有测试过，但理论上这个函数可以将小部件标题拆分成单词，<span>在第一个单词周围添加并返回新的小部件标题，然后您可以使用 CSS 设置样式。

您可以将这些行添加到functions.php您的主题中，或者更好的是，为您正在使用的主题创建一个子主题并将其添加到那里。这样，当主题更新时，它就不会被覆盖。

Answer 2

您可以试试这个，获取 iterate all .widget-title，获取其文本，按空格分割并更改第一个单词，<span style='color:blue;'>然后加入所有单词并在.widget-titlehtml 中设置。像

$('.widget-title').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words.join(' '));
});

编辑：

在你这边，你的小部件标题在.widget h3所以试试这个 -

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words[0] + ' <span style="color:black;">' + words.slice(1).join(' ') + '</span>');
});

或者如果你想要和你的页脚一样，那么你可以试试这个

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    $(this).html(words[0] + ' <span style="color:#333333;">' + words.slice(1).join(' ') + '</span>');
});