Question

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

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

这是我尝试的代码：

.active { color: #C00; }

显示内容，大写不起作用。感谢您的任何帮助，谢谢！

刚刚检查，我遇到了这个错误：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <dl>
    <dt>Coffee</dt>
    <dd class="option-not-available">Black hot drink</dd>
  </dl>
<div>

Answer 1

.val（）方法主要用于获取表单元素（例如输入，选择和文本区域）的值

您应使用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>

P.S。 Well, the CSS property text-transform: capitalize; doesn't work,是什么意思？它没有被应用？您检查开发人员检查员了吗？

Answer 2

我会以不同的方式处理它，而不是尝试在插入文本后更新文本-我会将滴定度作为标准的javascript函数传递给capitisation函数。

这很困难，因为我不知道您正在使用的数据结构，但是在将值传递给结果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>

大写功能在jQuery中不起作用

2 个答案: