大写函数在 jQuery 中不起作用

Question

我有一个网站（在 WordPress 中），它使用 jQuery 来显示内容（本身在 functions.php 中“计算”）。 基本上需要根据用户条件显示的内容是用PHP加载，用jQuery显示的。

问题是文本以大写显示，与设计 psd 不匹配。我尝试了许多在 StackOverflow 上找到的函数，但它们总是在用户键入数据时使文本大写，而我需要将加载的大写文本大写，并且我需要转换为大写。

这是我尝试过的代码：

$.fn.capitalize = function () {
    $.each(this, function () {
        var caps = this.value;
        caps = caps.charAt(0).toUpperCase() + caps.slice(1);
        this.value = caps;
    });
    return this;
};

$.each( tbllPosts, function( key, value ) {
    $('.results').prepend('<div class="col-6"><col="row">'+
                '<a href="'+wp.url+'" class="text-center"><h3 class="title">'+value.titre+'</h3></a>'+
                '</div>'+
                '</div>');
    $('.title').capitalize();
});

内容显示出来了，大写不行。任何帮助表示赞赏，谢谢！

刚刚检查，我有这个错误：

Uncaught TypeError: Cannot read property 'charAt' of undefined

Answer 1

.val()方法主要用于获取input、select、textarea等表单元素的值

您应该使用text()。

此外，您不会向您的函数发送任何参数。这就是它返回 undefined 的原因。

我简化了你的代码（因为你没有分享任何 html），所以我可以做一个工作示例。

我还使用trim() 删除了文本开头的空格，这样charAt(0) 将返回第一个字母而不是空格。

查看下方

$.fn.capitalize = function(t) {

  $.each(t, function() {
    let caps = t.text().trim();
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    t.text(caps)
  });
  return this;
};


const title = $('.title')
$.fn.capitalize(title);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title">
  capitalize me
</p>

附： Well, the CSS property text-transform: capitalize; doesn't work, 是什么意思？它没有得到应用？你检查过开发检查员吗？

Answer 2

我会以不同的方式处理它，而不是在插入文本后尝试更新文本 - 我会通过大写函数将滴度作为直接的 javascript 函数传递。

这很困难，因为我不知道您正在使用的数据结构，但我已经避开了一些东西来将值传递给函数，因为它被预先添加到结果 div 中。我还提供了一些大小写不同的字符串，以显示返回的值是正确大写的。

var tbllPosts = [
  {url: "url1", titre: "sample string 1"},
  {url: "url2", titre: "sample String 2"},
  {url: "url3", titre: "SAMPLE STRING 3"}
];


tbllPosts.forEach(function(post){
    $('.results').prepend('<div class="col-6"><col="row"><a href="'+post.url+'" class="text-center"><h3 class="title">'+ capitalize(post.titre)+'</h3></a></div></div>');
});

function capitalize (str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results"></div>

请注意，如果您想将字符串中每个单词的首字母大写 - 只需在空格“”处拆分字符串，然后将每个单词传递给函数。

var tbllPosts2 = [
      {url: "url1", titre: "sample string 1"},
      {url: "url2", titre: "sample String 2"},
      {url: "url3", titre: "SAMPLE STRING 3"}
    ];


    tbllPosts2.forEach(function(post){
        $('.results2').prepend('<div class="col-6"><col="row"><a href="'+post.url+'" class="text-center"><h3 class="title">'+ titleCase(post.titre)+'</h3></a></div></div>');
    });


function titleCase(str) {
 var strArr = str. split(' ');
 var newStrArr=[];
 strArr.forEach(function(word){
  newStrArr.push(capitalize(word))
})

return newStrArr.join(' ');
}
 


function capitalize (str) {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results2"></div>