Question

所以我有这个小脚本，如果div的高度超过一定数量，则在divs之后添加一个“Read More”按钮，类别为“only-so-big”。

var allOSB = [];
var mxh = '';

var setResizeVariables = function() {
  // Set Variables
  allOSB = document.querySelector(".only-so-big :not(.not-these)");

  if (allOSB.length > 0) {
    mxh = window.getComputedStyle(allOSB[0]).getPropertyValue('max-height');
    mxh = parseInt(mxh.replace('px', ''));

    // Add read-more button to each OSB section
    for (var i = 0; i < allOSB.length; i++) {
        var currentOSB = allOSB[i];
      var el = document.createElement("button");
      el.innerHTML = "Read More";
      el.setAttribute("type", "button");
      el.setAttribute("class", "read-more hid");

      insertAfter(allOSB[i], el);
      currentOSB.class += "not-these";
    }
  }

  // Add click function to buttons
  var readMoreButtons = document.getElementsByClassName("read-more");
  for (var i = 0; i < readMoreButtons.length; i++) {
    readMoreButtons[i].addEventListener("click", function() { 
      revealThis(this);
    }, false);
  }

  // Update buttons so only the needed ones show
  updateReadMore();
}


// show only the necessary read-more buttons
function updateReadMore() {
  if (allOSB.length > 0) {
    for (var i = 0; i < allOSB.length; i++) {
      if (allOSB[i].scrollHeight > mxh) {
        if (allOSB[i].hasAttribute("style")) {
          updateHeight(allOSB[i]);
        }
        allOSB[i].nextElementSibling.className = "read-more";
      } else {
        allOSB[i].nextElementSibling.className = "read-more hid";
      }
    }
  }
}

function revealThis(current) {
  var el = current.previousElementSibling;
  if (el.hasAttribute("style")) {
    current.innerHTML = "Read More";
    el.removeAttribute("style");
  } else {
    updateHeight(el);
    current.innerHTML = "Show Less";
  }
}

function updateHeight(el) {
  el.style.maxHeight = el.scrollHeight + "px";
}


function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

window.onload  = function() {
  setResizeVariables();
}

window.onresize = function() {
  updateReadMore();
}

HTML / Blade：

<div class="status-body" data-body-status-id="{{ $status->id }}">
    <div class="status-body-text only-so-big">{!! $status->body !!}</div>
</div>

但是，我目前的问题是我现在不止一次调用此函数。发生这种情况时，会添加额外的“阅读更多”按钮，从而产生多个按钮。它是如何使insertAfter(allOSB[i], el);仅在该div之后不存在具有该类的按钮时才插入新的“read more”按钮的？

Answer 1

您可以在按钮上添加一个标记，以检查是否已添加按钮：

for (var i = 0; i < allOSB.length; i++) {
    var currentOSB = allOSB[i];
    if (currentOSB.hasAttribute("data-button-added")) continue; // check if it's been added already
    var el = document.createElement("button");
    el.innerHTML = "Read More";
    el.setAttribute("type", "button");
    el.setAttribute("class", "read-more hid");
    currentOSB.setAttribute("data-button-added", "1"); // add the flag to the current OSB
    insertAfter(allOSB[i], el);
}

小提琴：https://jsfiddle.net/5j1vxxxs/2/

这个答案被广泛改变了。见评论。

jQuery insertAfter只在未插入之前

1 个答案: