Функция капитализации не работает в JQuery - PullRequest
Новая
       10

Функция капитализации не работает в JQuery

0 голосов
/ 26 октября 2018

У меня есть веб-сайт (в 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

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Я бы подошел к этому по-другому, и вместо того, чтобы пытаться обновить текст после его вставки - я бы передавал титр через функцию capitlization как прямую функцию 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>
0 голосов
/ 26 октября 2018

Метод .val () в основном используется для получения значений элементов формы, таких как input, select и textarea

Вы должны использовать text() в вашем случае.

Кроме того, вы не отправляете аргументы своей функции. Вот почему он возвращает неопределенное.

Я упростил ваш код (поскольку вы не делитесь 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,? это не применяется? Вы проверяли инспектора разработчиков?

...