2017-09-05 133 views
0

我試圖在的鏈接上實現讀取更多和讀取更少的功能,爲我的文章應用程序Django。但是當我點擊閱讀更多鏈接時,我的JavaScript代碼沒有響應。JavaScript代碼沒有響應

這是我的文件。

$(document).ready(function() { 
 
    var $el, $p, $up, $ps; 
 

 
    $('.button').on("click", function() { 
 
    $el = $(this); 
 
    $p = $el.parent(); 
 
    $up = $p.parent(); 
 
    $ph = $up.find(".para"); 
 
    $ps = $up.find(".rest-content"); 
 

 
    if ($ps.is(':hidden')) { 
 
     $p.load(function() { 
 
     $ps.show(), $el.html("(read-less)"), $ph.hide(), console.log("It worked"); 
 
     }); 
 
    } else { 
 
     $ps.hide(); 
 
     $el.html("(read-more)"); 
 
     $ph.show(); 
 
    } 
 
    return false; 
 
    }); 
 
});
{% if article.post|length > 300 %} 
 
    <p class="para">{{ article.post|truncatechars:300}}</p> 
 
    <p class="rest-content">{{ article.post}}</p> 
 
    <p class="read-more"><a href="#" class="button" >(read more)</a></p><br> 
 
{% else %} 
 
    <p class="para">{{ article.post }}</p> <br> 
 
{% endif %}

+0

你是什麼意思的「沒有迴應」?使用[瀏覽器控制檯(開發工具)](https://webmasters.stackexchange.com/q/8525)(點擊'F12')並讀取任何錯誤。我不是jQuery專家,但您如何期待'$ p.load'調用起作用?這不僅僅是一個事件監聽器嗎? – Xufox

+0

只有從外部資源加載內容的元素(如'img'和'iframe')纔會觸發'load'事件。 'a'元素不是一個按鈕,使用按鈕作爲按鈕和錨點作爲鏈接。另外,你只在click事件處理程序中使用變量,最好在函數中聲明它們。 – Teemu

+0

@Shiladitya您不應該僅僅因爲關鍵字而將關鍵字格式化爲代碼。代碼格式僅適用於代碼(變量名稱,函數名稱,類名稱等)或代碼類工件(文件名,命令等)。不應使用代碼格式來突出顯示關鍵字,編程語言的名稱等。**關鍵字通常不需要突出顯示**,但如果確實必要,請使用粗體或斜體。您可能對Meta上的這些帖子感興趣:meta.stackexchange.com/q/135112/349538和meta.stackoverflow.com/q/355183/4284627。 –

回答

0

你的很多jQuery的電話沒有正確的語法。例如:

$ph = $up.find(".para"); 

應該

$ph = $($up).find(".para"); 

爲了使用jQuery的功能。重新寫你的代碼,考慮到這一點,看看是否有效:)

+0

我按照上述解決方案編輯了我的代碼,但未運行。實際上,我的代碼已經在之前運行了,並且顯示了預期的輸出,但是突然間,java腳本部分沒有響應這個或者其中寫入的任何其他腳本。 –