Question

任何人都可以帮我改造功能#open（“var”）和.post000（“var”）我的意思是，当我点击＃open2 post将是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＃元素更改为具有数据属性来进一步压缩它，例如：

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

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

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

在函数中执行：

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

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

然后你将所有.postXXXX html内容设置为""，并且只根据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);
}

如何压缩更多的jquery文件

2 个答案: