javascript - 更改类别页面上每个帖子的摘录

在类别页面中，每个帖子都有不同的摘录。我需要根据窗口宽度用JavaScript精简该摘录。我删除了与窗口宽度无关的代码。我的问题是当前代码将所有摘录替换为第一个。显然是因为theString取第一个值。

您可以在此处查看代码：

function trimWords(){
  var contentWidth = $(window).width(); //get width of browser
  var maxLength = 20 // maximum number of characters to extract

  //trim the string to the maximum length
  var trimmedString = theString.substr(0, maxLength);

  //re-trim if we are in the middle of a word
  trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
  $(".trimmed-words").html(trimmedString);
}
if ($(".trimmed-words").length > 0){
  var theString = $(".trimmed-words").html(); //issue here. it takes only the first value from the first div
  trimWords();
  $(window).resize(trimWords)
}
		

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="individual-post">
  <div class="trimmed-words">
    first first first first first first first
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    second second second second second second
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    third third third third third third third
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    fourth fourth fourth fourth fourth fourth
    </div>
  </div>

我需要按照以下方式做一些事情：

$(".individual-post").each(function(){ //loop through every div
    var theString = $(this).find(".trimmed-words").html();
    trimWords(theString);
});

但是我无法转移theString的值。

如果能为我指明正确的方向，我将不胜感激。

谢谢。

最佳答案

实际上，由于在全局作用域中定义的变量以及在函数内部使用的变量，因此您的代码有点“危险”。

此外，您需要循环遍历.trimmer-words元素以获取所有字符串，而只能获取第一个。因此，我会稍微修改一下代码，只是循环遍历元素，读取原始字符串，使用trimWords函数剪切字符串，然后更新元素html。代码来了。

我把它和你的保持得一样多。

function trimWords(theString){

  var contentWidth = $(window).width(); //get width of browser
  var maxLength = 20 // maximum number of characters to extract

  //trim the string to the maximum length
  var trimmedString = theString.substr(0, maxLength);
  console.log(trimmedString);

  //re-trim if we are in the middle of a word
  trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
  return trimmedString;
}

$(".trimmed-words").each(function(index, item) {
  var theString = $(item).html();
  var trimmedString = trimWords(theString);
  $(item).html(trimmedString);
});

$(window).resize(trimWords)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="individual-post">
  <div class="trimmed-words">
    first first first first first first first
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    second second second second second second
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    third third third third third third third
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    fourth fourth fourth fourth fourth fourth
    </div>
  </div>

关于javascript - 更改类别页面上每个帖子的摘录，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29143661/