Question

在类别页面中，每个帖子都有不同的摘录。我需要根据窗口宽度调整javascript的摘录。我删除了窗口宽度的代码，因为它不相关。我的问题是当前代码用第一个代码取代所有摘录。显然，因为theString取第一个值。

你可以在这里看到代码：

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

我需要按照这些方针做点什么：

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

但我无法转移theString的价值。

我将非常感谢能帮助我指明正确方向的任何帮助。

感谢。

Answer 1

实际上你的代码有点＆＃34;危险＆＃34;，因为在全局范围内定义变量并在函数内部使用等...

此外，您需要遍历.trimmer-words元素以获取所有字符串，而不是仅获得第一个字符串。所以我会稍微改变你的代码，只需遍历元素，读取原始字符串，使用trimWords函数剪切字符串，然后更新元素html。这是代码。

我保持与你的相似之处。

＆＃13;

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)

＆＃13;

<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>

＆＃13;

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

1 个答案: