Question

我有一个像这样的jQuery函数：

 var readMore = jQuery(document).ready(function() {

  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
      //Stuff to do when btn is in the read more state
      $("#toggle").text("Read Less");
      $(".text").slideDown();
    } else {
      //Stuff to do when btn is in the read less state
      $("#toggle").text("Read More");
      $(".text").slideUp();
    }
  });
});

现在，这个函数清楚地执行了read-more按钮行为并且工作正常。但是，有一个小问题。我希望能够在一个页面上重复使用此功能用于多个按钮和文本，这是我的目标，但目前它只在一段文本上执行该功能。我听说我也无法使用#toggle来使用ID，原因是因为 “我无法重复使用id，我需要将其转换为类。”

该功能在HTML中使用如下：

Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span>
<button class="button jkit-btn-inverse" id="toggle">Read More</button>

<span class="text">是文本切断的地方，隐藏了该跨度内的所有内容，以便在按下按钮后显示更多功能。我可以在一个区域使用它，而不是在多个区域。

我如何重复使用此功能？

编辑：

关于第一个答案，用类替换所有ID确实有效，但是，我只能在一个区域中使用它。如果我尝试在另一个区域使用另一个段落和另一个按钮，它根本不起作用。

Answer 1

将ID改为Class改为HTML Code

HTML

<div class="section">
        Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span>
        <button class="button jkit-btn-inverse toggle">Read More</button>
    </div>
    <div class="section">
        Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span>
        <button class="button jkit-btn-inverse toggle">Read More</button>
    </div>
    <div class="section">
        Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span>
        <button class="button jkit-btn-inverse toggle">Read More</button>
    </div>

Jquery的

var readMore = jQuery(document).ready(function () {

            $(".section .toggle").click(function () {
                var elem = $(this).text();
                if (elem == "Read More") {
                    //Stuff to do when btn is in the read more state
                    $(this).text("Read Less");
                    $(this).parent().find('.text').slideDown();
                } else {
                    //Stuff to do when btn is in the read less state
                    $(this).text("Read More");
                    $(this).parent().find('.text').slideUp();
                }
            });
        });

CSS

 span.text {
            display: none;
        }

https://jsfiddle.net/4jfzdwLb/

重复使用jQuery函数Read More Button

1 个答案: