Question

Jquery / Ajax / Js的新手。我将如何将以下代码绑定/委托到容器div或文档本身，以便当我通过jquery重新加载div（使用该代码）时，代码不会像当前在文档中那样被破坏。）;

$.each($(".product-comment"), function (key, value) {

    var showmoreHtml = $(this).html();
    var showlessHtml = showmoreHtml.substr(0, 400);
    if (showmoreHtml.length > 400) {
        $(this).html(showlessHtml).append("<a href='' class='product-comment-more'> (...Show More)</a>");
    } else {
        $(this).html(showmoreHtml);
    }
    $(this).on("click", ".product-comment-more", function (event) {
        event.preventDefault();
        $(this).parent(".product-comment").html(showmoreHtml).append("<a href='' class='sight-comment-less'> (Show less)</a>");
    });
    $(this).on("click", ".product-comment-less", function (event) {
        event.preventDefault();
        $(this).parent(".product-comment").html(showmoreHtml.substr(0, 400)).append("<a href='' class='product-comment-more'> (...Show More)</a>")
    });
});

Answer 1

第一件事是将 more / less 函数放置在命名函数中以添加链接...因此您可以在代码中的任何位置运行它。掌握所有逻辑。

然后，可以在该循环之外定义单击处理程序（在 more 和 less 上）。定义它们是没有用的，因为它们被委托了。并使其在命名函数中运行循环，并向该函数传递true / false参数。

最后...在ajaxComplete上，再次运行该功能。

因此，所有更多/更少修复将在加载，单击和ajaxComplete后完成。

function moreLess(more){
  $.each($(".product-comment"), function (key, value) {

      // Remove any more/less link (if any)
      $(this).find("[class^='product-comment-']").remove();

      // Get the remaining HTML
      var HTML = $(this).html();

      // Decide about the more or less link. If "more" is false,
      if (HTML.length > 400 && more) {
        $(this).html(HTML).append("<a href='' class='product-comment-more'> (Show less)</a>");
      }
      if (HTML.length > 400 && !more) {
        $(this).html(HTML.substr(0, 400)).append("<a href='' class='product-comment-more'> (...Show More)</a>");
      }
      if (HTML.length <= 400) {
        $(this).html(HTML);
      }
  });
}

// On page load execution
moreLess(false);

// On ajax complete execution
$( document ).ajaxComplete(function(){
  moreLess(false);
});

// Click handler for more.
$(".product-comment").on("click", ".product-comment-more", function (event) {
  event.preventDefault();
  moreLess(true)
});

// Click handler for less.
$(".product-comment").on("click", ".product-comment-less", function (event) {
  event.preventDefault();
  moreLess(false)
});

免责声明：写得很快，未经测试...但是我很自信，它可以正常工作。随意问的问题。 ;）

使用jQuery附加到div

1 个答案: