Проверьте, существует ли родительский класс в jQuery, и установите другую переменную

Question

Сайт имеет описания категорий.Это описания длинные, и я сделал их короче с помощью jQuery.Максимальное значение по умолчанию для wordcount составляет 7 слов

var maxWords = 7;   

Когда родительский класс CSS расширен существует

 <div class="below expanded">

переменная maxWords должна быть 20;

var maxWords = 20;

Чтобы понять это, я добавил в свою функцию jQuery следующее:

if($(this).closest(".below").hasClass(".expanded")) {
{
var maxWords = 7;
} else {
var maxWords = 20;
}

Но это не сработало.

Я сделал JSFiddle, чтобы вы увидели полный код jQuery.Описание категории 2 требует 20 слов вместо 7.

Для JSFiddle: https://jsfiddle.net/1pehcux5/

Большое спасибо.

Answer 1

Сначала вы должны удалить точку (.) из .hasClass(".expanded"), чтобы она выглядела как .hasClass("expanded")

Во-вторых, у вас есть { для многих в "expanded")) {{ maxWords;

В-третьих, удалите var из maxWords = 7 и maxWords = 20, поскольку вам не нужно объявлять его.

if ($(this).closest(".below").hasClass("expanded")) {
  maxWords = 7;
} else {
  maxWords = 20;
}

Рабочая демонстрация

$('.descshort').each(function() {
  var words = $(this).text().replace(".", ". ").replace(",", ", ").split(" ").filter(function(a) {
    return a.trim()
  });


  var maxWords = 7;
  if ($(this).closest(".below").hasClass("expanded")) {
    maxWords = 7;
  } else {
    maxWords = 20;
  }

  var arr = [];
  var index = 0;

  for (var i = 0; i < words.length && arr.length + 1 <= maxWords; i++) {
    if (words[i] != ',' && words[i] != '.') {
      arr.push(words[i]);
    }
    index = i + 1;
  }
  if (arr.length == maxWords && words.length > maxWords) {

    html = '<span>' + words.slice(0, index).join(" ") + '</span>' + '<span class="more_text" style="display:none;"> ' + words.slice(index, words.length).join(" ") + '</span>' + '<span style="display:inline-block" id="dots">...</span> <a href="#" class="read_more">+</a>'

    $(this).html(html)

    $(this).find('a.read_more').click(function(event) {
      $(this).toggleClass("less");
      event.preventDefault();

      if ($(this).hasClass("less")) {
        $(this).html("<u>[ close ]</u>")
        $(this).parent().find(".more_text").show();
      } else {
        $(this).html("+")
        $(this).parent().find(".more_text").hide();

      }
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="below">
  <div class="forumslist">
    <p class="header">Section</p>
    <div class="forum-left">
      <h3>Category</h3>
      <p class="description descshort">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
  </div>
</div>

<hr>

<div class="below expanded">
  <div class="forumslist">
    <p class="header">Section2</p>
    <div class="forum-left">
      <h3>Category 2</h3>
      <p class="description descshort">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
  </div>
</div>

Answer 2

просто измените код следующим образом: -

var maxWords = 20;
//check with ! and remove . from expanded
if(!$(this).closest(".below").hasClass("expanded")) {
    maxWords = 7;
}

Рабочий фрагмент: - https://jsfiddle.net/65cje83w/

Answer 3

if / else написан неправильно.Вам нужно изменить это на следующее:

var maxWords = 7;

if( $(this).closest(".below").hasClass("expanded") ) {
    maxWords = 20;
} else {
    maxWords = 7;
}

Вы также повторно декларировали var maxWords внутри каждой области видимости в if / else, не перезаписывая глобальную переменную.