jquery - 如何从其他输入中获取一个div的可见行并删除css隐藏的所有其他行

Question

我在生成 N 行完整段落并将其放入输入中时遇到问题。

为此，我创建了下面的代码

$(".button_span").click(function(){
   $('.button_span').removeClass("active");
   $(this).addClass("active");
}); 
$(".event_button").click(function(){ 
    var count = $('#count').val();
    $(".event_button").removeClass('active_event');
    $(this).addClass('active_event');
    var selected_event = $('.active_event').attr("data-value");
    var selected = $('.active').attr("data-value");
    
    if (selected_event == 'email') 
    {
        if ($(".button_span").hasClass("active")) 
        {
            var downloaddata = '';
            
            if (selected == 'lines') 
            {
                                                  
                var abc1 = $(".dummy").clone();
                abc1.removeAttr('style');                        
                downloaddata = abc1.html();
            }
            console.log(downloaddata);
            $('#data').val(downloaddata);
            
        }
    } 
}); 
$(".large_orange_button").click(function(){    
   var count = $('#count').val();                 
   var selected = $('.active').attr("data-value");                  
   if (selected == 'lines') 
   {
       var words = "";
       var text = "";
       $( "p" ).each(function( index ) {
           words += ($( this ).text()).trim();
       });
       $( "#demo" ).empty();
       $('#demo').append('<div class="dummy" style="display: none;">'+words+'</div>');    
       $(".dummy").css({"overflow": "hidden", "text-overflow": "ellipsis", "display": "-webkit-box", "-webkit-line-clamp": count, "-webkit-box-orient": "vertical", "display": "-webkit-box"});
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="count" value="3" maxlength="3" autocomplete="off" required="required">
<span data-value="lines" class="button btn button_span">Lines</span>
<div class="col-xs-12" id="ltr" style="max-height: none; display: none;">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. 
    </p>
    <p>
        Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque.
    </p>
    <p>
        Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. 
    </p>
</div>
<div class="generate text-right"> <input type="submit" class="large_orange_button" value="Generate"></div>
<input type="hidden" name="data" id="data" value="">
<span data-value="email" class="button btn event_button email">Send via Email</span>
<p id="demo"></p>

这是我创建的代码，在其中单击行并生成它，然后您会发现您从段落中输入的许多行工作正​​常，但当您单击通过电子邮件发送时出现问题并将您生成的行放在输入中，它会传递整个段落，而不仅仅是您生成的行。有没有人可以...

Answer 1

$( document ).ready(function() {
    
    $.fn.renderedText = function(){
      var o = s = this.text();
      while (s.length && this[0].scrollHeight >  this.innerHeight()){
        s = s.slice(0,-1);
        this.text(s+"…");
      }
      this.text(o);
      return s;
    };

    $(".button_span").click(function(){
       $('.button_span').removeClass("active");
       $(this).addClass("active");
    }); 
    $(".event_button").click(function(){ 
        var count = $('#count').val();
        $(".event_button").removeClass('active_event');
        $(this).addClass('active_event');
        var selected_event = $('.active_event').attr("data-value");
        var selected = $('.active').attr("data-value");

        if (selected_event == 'email') 
        {
            if ($(".button_span").hasClass("active")) 
            {
                var downloaddata = '';

                if (selected == 'lines') 
                {


                    downloaddata = $('#dummy').renderedText();
                }
                console.log(downloaddata);
                $('#data').val(downloaddata);

            }
        } 
    }); 
    $(".large_orange_button").click(function(){    
       var count = $('#count').val();                 
       var selected = $('.active').attr("data-value");                  
       if (selected == 'lines') 
       {
           var words = "";
           var text = "";
           $( "p" ).each(function( index ) {
               words += ($( this ).text()).trim();
           });
           $( "#demo" ).empty();
           $('#demo').append('<div id="dummy" style="display: none;">'+words+'</div>');    
           $("#dummy").css({"overflow": "hidden", "text-overflow": "ellipsis", "display": "-webkit-box", "-webkit-line-clamp": count, "-webkit-box-orient": "vertical", "display": "-webkit-box"});
       }
    });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="count" value="3" maxlength="3" autocomplete="off" required="required">
<span data-value="lines" class="button btn button_span">Lines</span>
<div class="col-xs-12" id="ltr" style="max-height: none; display: none;">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. 
    </p>
    <p>
        Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque.
    </p>
    <p>
        Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. 
    </p>
</div>
<div class="generate text-right"> <input type="submit" class="large_orange_button" value="Generate"></div>
<input type="hidden" name="data" id="data" value="">
<span data-value="email" class="button btn event_button email">Send via Email</span>
<p id="demo"></p>

引用Here