如何壓縮更多的jquery文件

Question

任何人都可以幫我改造功能#open（「var」）和.post000（「var」） 我的意思是，當我點擊＃open2後將post0002等。Whant一個功能不是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(""); 

都做同樣的事情。

你可以通過改變你的開放＃元素有一個數據屬性進一步壓縮下來，例如：

<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); 
}