使用「this」切換切換？

我在一個網頁中使用了多篇文章。我只是有一個簡短的文字介紹，然後是一個「閱讀更多」鏈接，用於切換文章的其餘部分。使用「this」切換切換？

我試圖簡化我的代碼，正在尋找一種解決方案，以某種方式使用this，而不是需要爲每個文本塊使用唯一的類或ID，只需使用一個函數來處理滑動切換爲所有隱藏的文本塊。如果可以這樣做，我想要一些提示如何開發我的代碼？我不確定。

jQuery的

$(document).ready(function() { 
$(".more").click(function(){ 
$(this).next(".extra").slideToggle("fast"); 
}); 
});

HTML

<div class="articleContent"> 
    <h1>Headline 1</h1> 
    <p>Text 1 <a href="#" class="more">read more....</a> 
    </p> 
    <p class="extra"> 
    Some more text to read 1 
    </p> 
</div> 

<div class="articleContent"> 
    <h1>Headline 2</h1> 
    <p>Text 2 <a href="#" class="more">read more....</a> 
    </p> 
    <p class="extra"> 
    Some more text to read 2 
    </p> 
</div>

來源

2014-02-11 3D-kreativ

'$（this）.parent（）。next（）'。請參閱http://api.jquery.com/category/traversing/ –

在這裏你去...不要在此

Updated Example

$('document').ready(function() { 
    $(".more").click(function(e){ 
     e.preventDefault(); 
     $(this).parent('p').siblings(".extra").slideToggle("fast"); 
    }); 
});

來源

2014-02-11 22:40:37 VIDesignz

謝謝，但是當我點擊鏈接時沒有任何反應！？ –

文檔應該在引號'$（'document'）。ready（）;' – VIDesignz

好，現在它正在工作。但我發現了一些不太好的東西。如果我向下滾動一下並點擊「閱讀更多內容」，頁面會跳轉到頁面頂部！你明白我的意思嗎？儘管我已經向下滾動了一下，但我希望文本能夠滑動切換每篇文章。有沒有辦法限制這個？否則，用戶必須再次向下滾動，那不太好。或者這只是瀏覽器如何工作？ –

下一個使用下面是用幹活一個的jsfiddle G代碼：http://jsfiddle.net/6wqsf/

的JavaScript：

$(".more").click(function() { 
    $(this).parent().next(".extra").slideToggle("fast"); 
});

來源

2014-02-11 22:43:13

我建議：

$('.articleContent').on('click', function(e){ 
    if ($(e.target).is('.more')) { 
     $(this).find('.extra').toggle(); 
    } 
});

JS Fiddle demo。

參考文獻：

來源

2014-02-11 22:45:51

使用「this」切換切換？

回答

相關問題