Skenario

Saya memiliki deskripsi yang berisi tautan. Jika deskripsi berisi lebih dari 100 karakter, saya mengirisnya agar hanya berisi teks dari karakter pertama hingga karakter ke-100. Saya juga menunjukkan elips dan tautan Lainnya yang menampilkan konten lainnya saat diklik.

Masalahnya

Saat mengiris, itu menghapus tautan di dalam konten.

Pikiran Saya / Hasil yang Diinginkan

Saya menggunakan metode .text() jQuery untuk mendapatkan panjang deskripsi yang tepat untuk menjaga konsistensi irisan. Jika saya berpikir benar, .text() hanya mengambil konten mentah itulah sebabnya tag jangkar dilucuti. Namun, jika saya menggunakan metode .html() akan sulit untuk menjaga konsistensi di mana teks diiris (yang saya butuhkan), karena itu akan menghitung karakter dari tag html tersebut dan atributnya juga. Di sinilah saya agak terjebak.

Pada akhirnya, saya ingin cara untuk mengiris deskripsi tepat 100 karakter sambil menjaga tautan tetap masuk. Saya juga akan memiliki beberapa deskripsi di setiap halaman, jadi saya ingin cara untuk memperluas dan meminimalkan setiap deskripsi unik individu saat diklik.

Bermain-main di CodePen: https://codepen.io/andrewgarrison/pen/BdJQGz/

$(document).ready(function () {
    var minimized_elements = $('p.description');
    var minimize_character_count = 99;

    minimized_elements.each(function () {
        var t = $(this).text();
        if (t.length < minimize_character_count) return;

        $(this).html(
            t.slice(0, minimize_character_count) 
          + '<span>... </span><a href="#" class="more">More</a>'
          + '<span style="display:none;">'
          + t.slice(minimize_character_count, t.length) + ' <a href="#" class="less">Less</a></span>'
        );

    });

    $('a.more', minimized_elements).click(function (event) {
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();
    });

    $('a.less', minimized_elements).click(function (event) {
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Sliced Text</h3>
<p class="description">This product is super hot. You can go to <a href="http://www.someurlgoeshere.org">this awesome website</a> and order it right now! But wait, that's not all. If you buy three you get 20 more free. That's right. Buy now from <a href="#">here</a> and this could all be yours.</p>

Terima kasih!

2
Andrew Garrison 17 Agustus 2017, 06:23

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan fungsi konten jQuery untuk mendapatkan daftar turunan dari suatu elemen, termasuk node teks.

Kemudian Anda dapat mengulang anak-anak dan menambahkannya hingga jumlah karakter melebihi jumlah maksimum. Tetapi alih-alih meletakkan sisanya di dalam rentang di sini saya hanya menduplikasi paragraf dan beralih di antara keduanya. Jika pemisahan terjadi di dalam tautan (mis. jika Anda menyetel minimize_character_count ke 50), hanya sebagian dari tautan yang akan ditampilkan tetapi akan tetap berfungsi.

$(document).ready(function () {
    var minimized_elements = $('p.description');
    var maxchars = 99;

    minimized_elements.each(function () {
      var $this = $(this);
      $this.hide();
      var children = $this.contents();
      var $shortDesc = $('<div />');
      var len = children.length;
      var count = 0;
      var i = 0;
      while (i < len) {
        var $elem = $(children[i]).clone();
        var text = $elem.text();
        var l = text.length;
        if (count + l > maxchars) {
          var newText = text.slice(0, maxchars - count);
          if ($elem.get(0).nodeType === 3) {
            $elem = document.createTextNode(newText);
          } else {
            $elem.text(newText);
          }
          $shortDesc.append($elem);
          break;
        }
        count += l;
        $shortDesc.append($elem);
        i++;
      }
      $shortDesc.append($('<span>... </span>'));

      $shortDesc.append($('<a href="#" class="more">More</a>').on('click', function(){
        $this.show();
        $shortDesc.hide();
      }));
      $this.append($('<a href="#" class="less">Less</a>').on('click', function() {
        $this.hide();
        $shortDesc.show();
      }));

      $this.after($shortDesc);
    });
});

Berikut demonya: https://codepen.io/anon/pen/eEyvpY?editors= 1011

2
solarc 17 Agustus 2017, 19:26

Saya rasa saya telah berhasil mencapai apa yang ingin Anda lakukan di sini: https://codepen.io/ hydrospell/pen/EvoZbB

Langkah-langkah yang saya lakukan adalah:

  1. Rekam semua <a> kemunculan dengan teks, url, dan indeksnya dalam string asli dan kumpulkan dalam array
  2. Memotong string tanpa mempertimbangkan HTML (.text())
  3. Telusuri susunan tautan, ganti tautan untuk setiap teks yang ditautkan dengan bantuan indeks yang dikumpulkan. Ada pertimbangan jika tautan terakhir perlu dipotong juga.

Saya harap ini membantu!

Ini adalah jawaban stackoverflow pertama saya, jadi mohon maafkan kesalahan format/tautan yang salah!

2
Siah 17 Agustus 2017, 04:41