更改類別頁面上每個帖子的摘錄

Question

在類別頁面中，每個帖子都有不同的摘錄。我需要根據窗口寬度使用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) 
 
} 
 
\t \t

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

我會很感激任何幫助，將指向我的正確方向。

謝謝。

Answer 1

其實你的代碼是有點「危險」的，因爲變量全局範圍定義和內部功能等使用的...

而且你需要通過.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>