更多/阅读少的jQuery/Javascript角

Question

请看看到下面的代码：

<div id=more-text> 
    <p>ccc</p> 
    <p>xcxc</p> 
    <p>xcxcx</p> 
    <p>xcxcxcxcx</p> 
</div> 

假设我有100个字符，要显示只在第一50，一旦我点击View more它应该显示余下的50个角色。

这是我的标记：

<div class="more-less"> 
    <div class="more-block"> 
     <p><strong>Market Thoughts–Our Investment Outlook for 2014 </strong></p> 
     <p>If there is a lesson learned from 2013, it's this: waiting to re-enter equity markets can prove to be expensive. Investors who stayed out of markets last year found themselves waiting for a pullback that didn’t happen. And many who were out of the markets last year have been out of the markets much longer.</p> 
     <p>test 
     </p> 
     <p></p> 

     <p>Looking at stock market returns over the past five years, global equities have returned a notable +15% per year. Extending that timeframe back to 10 years—a period that includes the 2008 financial crisis—global equities still returned a solid +7% per year, for those who stayed invested.</p> 
     <p> </p> 
     <p>Our outlook for 2014 is essentially built around the continuation of a slow-but-steady global recovery. We believe we are in the midst of what remains a protracted, but more balanced, recovery this year that will continue to be led by the United States. There is a lot being said right now about how far we are into this recovery (five years, give or take) and that inevitably, by being this late in the cycle, a recession must be right around the corner. I want to point out that recessions are generally “predicted” with revised data—that is, after the fact.</p> 
     <p> </p> 
     <p>However, the current recovery is somewhat different—it’s happening as part of a bigger deleveraging cycle. In that respect, time is on our side; we want the process to take longer. Short bouts of deleveraging are a great deal more painful—as evidenced by the volatile “taper tantrum” reaction of markets last May and June, when the Federal Reserve first discussed removing quantitative easing. Markets fared much better when the Fed actually began to taper last December, as they were much more prepared.</p> 
     <p> </p> 
     <p><strong>A steady state of recovery, but with important leadership changes</strong></p> 
     <p>As illustrated in Figure 1, we see global growth accelerating in 2014 by +3.5%, getting to above “stall speed,” even if it’s not by much. Disinflation remains the greater policy concern for developed market central banks in Europe, Japan and the United States. That’s good news for risk assets, as long as valuations stay rational; right now they are (Figure 4). That’s bad for investors who are late to re-risk, because markets are no longer cheap.</p> 
     <p> </p> 
     <p>We expect to see Europe finally pull out of recession, though 2014 growth will likely top out around +1%–1.5%. In the United States, we expect to see growth of +2.5%–3.0%. The public sector is going to be far less of a drag than it has been (from -2.0% of GDP in 2013, to around -1.0% this year). While the Federal Reserve continues to withdraw monetary stimulus, Japan remains “all-in,” providing significant monetary and fiscal stimulus at a crucial point of support for global markets. We expect Japan to grow +1.5% this year, with inflation rising modestly. We believe the central bank’s 2.0% inflation target will be difficult to meet—let alone sustain—but that isn’t going to stop the Bank of Japan from trying.</p> 
     <p> </p> 
     <p>Across the global economy, there is an important change in leadership happening that has implications for how we are positioning our portfolios (Figures 2 and 3). While global growth remains anchored by emerging market economies, growth in these economies, in aggregate, is decelerating to around +5.0%–5.5%. Developed markets, however, are leading a more balanced recovery. This is a theme we identified last year as we began to rebalance investments more toward Japan and Europe, and away from emerging markets. However, we continue to maintain exposure to those emerging markets where we see opportunities—most notably North Asia. Differentiation is key.</p> 
     <p> </p> 
     <p>We came into 2013 with a clear view that the new Chinese government was serious about transitioning China to a more balanced economic and market model. That means lower and more stable growth as well as a better balance between exports, investment and consumption. We continue to believe the Chinese government is creating a clear roadmap for reform of the economy, culture, social development and the environment over the next decade. And importantly, the government is laying the groundwork for market-based pricing and resource allocation. These reforms will not only shift the composition of Chinese growth, but should ease concerns about growth sustainability in China and, more broadly, the region.</p> 
     <p> </p> 
     <p>With that in mind, we believe Chinese growth will continue to trend down over the next few years (closer to +6.0%–7.0%). We view this as part of a managed soft landing. Structural reforms are likely to alleviate longer-term concerns about the economy, and as this path is better understood, we expect market sentiment to improve as well. Similar to Japan this year, we believe that for this part of China’s economic transition, it’s their game to win (or lose). China is opting for short-term pain in order to position the country for longer-term structural gain.</p> 
     <p> </p> 
     <p><strong>Monetary policy</strong></p> 
     <p>As growth is gradually recovering, the United States is the first of the major developed markets to start withdrawing monetary stimulus, which has caused some fears that global markets may be losing a crucial point of support. This is creating some anxiety as we enter 2014, as the policy stimulus measures that have been implemented by developed market central banks in recent years have had a distorting effect on risk asset valuations.</p> 
     <p> </p> 
     <p>The Federal Reserve last year bought the equivalent of some 70% of the net issuance of U.S. Treasury bonds. The Bank of Japan is currently buying the equivalent of about 150% of net Japanese government bond issuance. Because government bonds serve as the reference point for the pricing of all risk assets, the fact that they are being directly influenced by central bank intervention has investors rightfully cautious about interpreting any relative value characterization of an asset class as cheap.</p> 
     <p> </p> 
     <p>While we expect interest rates in the United States to continue to move higher, in Europe and Japan we see monetary policy heading in the opposite direction. The European Central Bank (ECB) is on standby to add further accommodation if necessary, and Japan remains “all-in,” providing a buffer to Fed tapering as quantitative easing is removed.</p> 
     <p> </p> 
     <p><strong>Risk appetite</strong></p> 
     <p>After a strong run for risk assets in 2013, we expect more moderate returns ahead. That’s good news, because a little less exuberance would go a long way toward extending the recovery and alleviating investor apprehension. It’s interesting how markets going up can, at times, feel as frustrating to investors as markets that may be correcting. We feel good about the amount of risk we hold across our portfolios, and continue to advise against overreaching for, or concentrating, risk. In this respect, diversification is key: As correlations across risk assets continue to normalize downward, we expect that diversification will be a critical tool for managing market risk.</p> 
     <p> </p> 
     <p>Let’s take a look by asset class at where we see investment opportunities this year.</p> 
     <p> </p> 
     <p><em>Projections or forecasts are not reliable indicators of future performance and may not materialize. Assumptions used in their calculation are based upon historic data and market conditions, which are subject to change</em></p> 

    </div> 
</div> 

附加一个view less选项应该再次折叠第二50个字符。

我试图实现与验证码：

$(document).ready(function() { 

    var paragraphs = $('div.more-block p'); 

    for(i=0;i<paragraphs.length;i++) { 
     var name = $(this).find('p').text(); 
     var count = name.length; 
     if(count <= 2000) { 
      $(this).html("Less More"); 
     }else{ 
      $(this).html("Read More"); 
     } 
    } 
}); 

Answer 1

我不确定你有什么要求 的，但有一个例子，我只是做 希望它可以解决你的问题 使用jQuery -1.9.1

<html> 
    <head> 
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="js/butonmore.js"> 
    </script> 
    <title> 
    Test 
    </title> 
    </head> 
    <body> 
    <div id="more-text"> 
    </div> 
    <input type="button" value="show more" onclick="showmore()"/> 
</body> 
</html> 

这里是buttonmore.js

var texto="xcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxc"; 
$(document).ready(function() { 

var textomitad=texto.substring(1,50); 
alert(textomitad); 
var div=document.getElementById('more-text'); 
div.innerHTML=textomitad; 
    }); 

function showmore(){ 
var div=document.getElementById('more-text'); 
div.innerHTML=texto; 

}