Question

我想在product.description上进行更多展示而少展示，但是当我在正常字符串上进行测试但对{{product.description}}的值进行测试时，它将在{{product .description}}时，单击“显示更多”将显示整个描述，单击时显示“显示较少”将再次隐藏整个描述。

例如：普通字符串 abc ....更多 abcdef少 abc .....更多

但是在{{product.description}}上 ...... 更多 abcdef少 ......更多

product.description值已在系统中设置...

$(document).ready(function() {
  var showChar = 100;
  var ellipsestext = "...";
  var moretext = "more";
  var lesstext = "less";
  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar - 1, content.length - showChar);
      var charac = content.length;
      var html = c + '<span class="moreellipses">' + ellipsestext + charac + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

.morecontent span {
  display: none;
}

.comment {
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment more">
  <p> {{ product.description }} </p>
</div>

Answer 1

设置要显示的项目数，即通过设置长度来显示更少或更多。我建议正确使用angular js。

exports.getScreenShot = async function (req, res) {
    const requesturl = req.param('url');
    if (!requesturl) {
        return res.send(400, 'Missing url');
    }
    const parsedUrl = url.parse(requesturl);
    if (!parsedUrl.protocol) {
        return res.send(400, 'Invalid url, missing protocol');
    }
    if (!parsedUrl.hostname) {
        return res.send(400, 'Invalid url, missing hostname');
    }

    const options = {
        'width': req.param('width'),
        'height': req.param('height'),
        'delay': req.param('delay'),
        'userAgent': req.param('userAgent'),
        'full': (req.param('full') === 'true')
    };

    options.width = options.width || 1024;
    options.height = options.height || 768;
    options.delay = options.delay || 200;    
    const browser = await puppeteer.connect({
        browserWSEndpoint: 'wss://chrome.browserless.io/'
    });

    let page = await browser.newPage();
    await page.goto(requesturl);
    await page.waitFor(parseInt(options.delay));
    let imageName = parsedUrl.hostname.replace(/\W/g, '_');
    let pathName = parsedUrl.pathname.replace(/\W/g, '_').replace(/_$/, '');
    if (pathName) {
        imageName += pathName;
    }
    imageName = `${imageName}.png`;
    var tempPath = temp.path({ suffix: '.png' });
    await page.setViewport({ width: parseInt(options.width), height: parseInt(options.height) });
    await page.screenshot({
        path: tempPath,
        fullPage: options.full
    });
}

显示更多/更少的角度值

1 个答案: