如何使用jQuery动态添加链接[重复]

Question

我是一个程序初学者，我现在正在自学！ 首先非常抱歉我的英文不是很好，我会尽量完整的表达出来，谢谢。

我的问题是，我正在研究一种限制范围内单词数量的效果，如果单词数量超过该数量，它将隐藏并显示一个可以点击进入的显示更多超链接，但是如何我在末尾添加了链接而不是字符串？

$(function(){
    let len = 50; 
    $(".demo").each(function(i){
        if($(this).text().length>len){
            $(this).attr("title",$(this).text());
            let text=$(this).text().substring(0,len-1)+" show more"
            $(this).text(text);
        }
    });
});

.box {
    width: 300px;
    padding: 10px;
    border: #ef5c28 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
    <p class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.</p>
</div>

Answer 1

您可以使用 jquery 轻松添加任意 html 代码，例如

$(this).append("<button type='button'>");
$("<button type='button'>").appendTo(this);

（this = .each 循环内的每个 .demo）

有很多不同的方法可以做到这一点，每一种都有不同的用途。例如，这会更好地直接内置到 HTML 中，这样您就不会得到一个 FOUC（无样式内容的闪存），其中您的全文显示然后隐藏 - 但问题是专门关于使用 jquery 添加的。

首先，创建您想要的内容然后添加它可能更容易。

var btn = $("<button type='button'>");
$(this).append(btn);

这将保留对btn 的引用，您可以稍后对其进行操作，例如

btn.click(function() { ...

从语义上讲，超链接<a href= 应该“去”某个地方——为此，您应该使用button。您可以使它看起来像一个带有一些 css 的链接（通过快速 SO 搜索找到）。

$(function() {
  let len = 50;
  
  $(".demo").each(function(i) {
    if ($(this).text().length > len) {
      $(this).attr("title", $(this).text());
      let text = $(this).text().substring(0, len - 1);
      $(this).text(text);
      
      var btn = $("<button type='button' title='click to show more'>show more</button>");
      $(this).append(btn);
      
      btn.click(function() { 
          // restore the text, which was stored earlier in the `title`
          var demo = $(this).closest(".demo");
          demo.text(demo.attr("title"));
          
          // no longer need the button - inside the click handler `this` is now the button
          $(this).hide();
      });
    }
  });
});

.box {
  width: 300px;
  padding: 10px;
  border: #ef5c28 2px solid;
}

/* https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link */
button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
  font-style:italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
    <p class="demo">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
    </p>
</div>

---

作为替代方案，您也可以使用 css 并在父级 .box 上添加/删除一个类：

$(function() {
  $(".showmore").click(function() {
      $(this).closest(".box").removeClass("min");
  });
});

.box {
  width: 300px;
  padding: 10px;
  border: #ef5c28 2px solid;
}

/* https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link */
button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
  font-style:italic;
}

.box.min p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
}
.box .showmore {
  display:none;
}
.box.min .showmore {
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box min">
    <p class="demo">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
    </p>
    <button type='button' class='showmore' title='click to show more'>show more</button>
</div>

Answer 2

您需要做一些事情来创建“显示更多”链接并使其发挥作用。

链接本身的几个选项：您可以通过在 <span> 元素内创建 .demo 类使其与文本内联，在其后添加链接，然后将两者包装在 <p> 中 （见完整代码 sn-p）。另一种选择是在 HTML 中的段落之后添加链接作为锚点（或按钮等）：

<div class="box">
    <p class="demo> <!-- your full text --> </p>
    <a id="showMore"> show more</a>
</div>

然后，添加显示链接的代码，并创建显示原始全文的函数。您应该将全文存储在一个变量中，然后再用您的子字符串隐藏它，以便在删除完整文本后再次访问它。您可以随意在 css 中设置#showMore 的样式。类似的代码也可以添加一个“隐藏更多”元素。

$(function() {
  let len = 50;
  $(".demo").each(function(i) {
    // Store the original full text, so you can add it back
    let fullText = $(this).text();
    if ($(this).text().length > len) {
      $(this).attr("title", $(this).text());
      let text = $(this).text().substring(0, len - 1)
      $(this).text(text)
      // Show the "show more" link
      $("#showMore").show();
      // Add function to swap to full text and hide the link
      $("#showMore").click(function() {
        $("#showMore").hide();
        $(".demo").text(fullText);
      });
    }
  });
});

.box {
  width: 300px;
  padding: 10px;
  border: #ef5c28 2px solid;
}


/* Add the styling for "show more" element */

#showMore {
  display: inline;
  color: #ef5c28;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
  <!-- If you want the "show more link inline, make the full text inside a span and move the class from p to the span -->
  <p><span class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
</span>
    <a id="showMore"> show more</a>
  </p>
</div>

Answer 3

有了这个：$(this).text().length

您将占用前 50 个字符...

你想先获取文本并用空格“”分割它。

let allWordsInArray = $(this).text().split(" ")

如果数组长于 50 则添加链接并截断数组...

let finalText = ""
if (allWordsInArray.length > 50) {
  finalText = allWordsInArray.slice(0, 50).join(" ") + "..."  +"<a href='somelink'>sometext</a>";      
}
else {
  finalText = allWordsInArray.join(" ")
}

最后写出来

$(yourCustomContainer).html(finalText)

你有你的前 50 个字 + 链接...