jquery - 如何压缩更多的jquery文件

Question

谁能帮我重新制作功能#open（“var”）和.post000（“var”）我的意思是，当我点击#open2时，帖子将是post0002等。想要一个功能不是4等......当我推送链接时回答它向我展示了一个表格。而且这个js工作正常，但是太大了，没用。我需要制作通用js...

<div id="commentwindow">
        <form name="comment" action="#" method="post">
           <p><input class="name" type="text" maxlength="25" required placeholder="tell your name" formmethod="get"></p>
           <textarea  class="flud" required placeholder="insert text"></textarea>
           <p class="clearfix nopadding"><input class="submit" type="submit" value="add comment" formaction="#"></p>
        </form>
    </div>
    <ul class="postList">
        <li class="post post0004">
            <header>
                <span class="nameaccount">name</span>
                <span class="time">time</span>
            </header>
            <p>text</p>
            <footer>
                <a class="link open" id="open4" href="#open4">answer</a>
                <div class="empty"></div>
            </footer>
        </li>
        <li class="post post0002">
            <header>
                <span class="nameaccount">name</span>
                <span class="time">time</span>
            </header>
            <p>text</p>
            <footer>
                <a class="link open" id="open2" href="#open2">answer</a>
                <div class="empty"></div>
            </footer>
            <ul class="answer">
                <li class="post post0003">
                    <header>
                        <span class="nameaccount">name</span>
                        <span class="time">time</span>
                    </header>
                    <p></p>
                    <footer>
                        <a class="link open" id="open3" href="#open3">Answer</a>
                        <div class="empty1"></div>
                    </footer>
                </li>
            </ul>
        </li>
        <li class="post post0001">
            <header>
                <span class="nameaccount">name</span>
                <span class="time">time</span>
            </header>
            <p></p>
            <footer>
                <a class="link open" id="open1" href="#open1">Answer</a>
                <div class="empty"></div>
            </footer>
        </li>
    </ul>
</div>
    <script>
    $(document).ready(function () {
        $("#open1").click(function() {
            var formContent = $("#commentwindow").html();
        $(".post0001 .empty").html(formContent);
            $(".post0003 .empty").html("");
            $(".post0004 .empty").html("");
            $(".post0002 .empty").html("");
        });
    });
    $(document).ready(function () {
        $("#open2").click(function() {
            var formContent = $("#commentwindow").html();
            $(".post0002 .empty").html(formContent);
            $(".post0003 .empty1").html("");
            $(".post0004 .empty").html("");
            $(".post0001 .empty").html("");
        });
    });
    $(document).ready(function () {
        $("#open3").click(function() {
            var formContent = $("#commentwindow").html();
            $(".post0003 .empty").html(formContent);
            $(".post0004 .empty").html("");
            $(".post0002 .empty").html("");
            $(".post0001 .empty").html("");
        });
    });
    $(document).ready(function () {
        $("#open4").click(function() {
            var formContent = $("#commentwindow").html();
            $(".post0004 .empty").html(formContent);
            $(".post0003 .empty").html("");
            $(".post0002 .empty").html("");
            $(".post0001 .empty").html("");
        });
    });
</script>

Answer 1

您可以使用多个选择器来定位多个元素：

$(".post0003 .empty").html("");
$(".post0004 .empty").html("");
$(".post0002 .empty").html("");

变成

$(".post0003 .empty, .post0004 .empty, .post0002 .empty").html("");

两者都做同样的事情。

您可以通过将 open# 元素更改为具有 data 属性来进一步压缩它，例如：

<button id="open1" class="openButton" data-num="1">Click me</button>

然后你要做的是让所有按钮使用相同的点击处理程序：

$(".openButton").click(........);

在函数中执行：

var num = $(this).data("num");

所以现在你知道它是否是按钮 1、2、3 等。

然后，您将所有.postXXXXhtml 内容设置为""，并且仅根据 num 的值设置不同的内容。

所有这些都应该大量压缩代码并使其整体更整洁。

Answer 2

您可以通过获取单击的元素 ID 来做到这一点。尝试使用此功能。

function(event){
    var postNo = $(this).get('id');
    var postClass = "post000" + postNo.substr(4) 
    var formContent = $("#commentwindow").html();
    $(".empty").html("");
    $("." + postClass+" .empty").html(formContent);
}