jQuery的效果基本show元素A如果可見然後了slideDown元素B

Question

我有以下的HTML表單： -

<form id="subform"> 
    <p> 
     <input type="button" id="btn" value="Go!"/> 
    </p> 
    <p> 
     <select id="optlist"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
     </select> 
    </p> 
</form> 

而下面的jQuery的片段： -

$("#btn").click(function() { 
    // if address select list is visible slide it up and then slide down new <p> tag 
    if ($('#optlist').is(":visible")) { 
     $('form > p:nth-child(2)').slideUp('slow', function() { 
      $('<p id="noresults">No results found</p>').insertAfter('form > p:nth-child(2)').hide().slideDown("slow"); 
     }); 
    } 
    // else if select list is not visible just slide down the new <p> tag 
    else { 
     $('<p id="noresults">No results found</p>').insertAfter('form > p:nth-child(2)').hide().slideDown("slow"); 
    } 
}); 

我想要做的是，如果#optlist當前可見slideUp() THEN slideDown()一個新的<p>標記，否則只是slideDown()一個新的<p>標記（如果#optlist當前隱藏）。

這很好地工作在上面，雖然它有點笨重，例如我必須在if和else語句中重複插入新的<p>。

此外，除此之外，還有一個小錯誤，如果#noresults <p>標記已經存在，它目前會添加另一個，我怎麼能得到它閃爍當前#noresults如果它已經存在？

我可以檢查它是否存在使用if ($("#noresults").length) {};，但我也需要重複這一點（在if和else）。

我可以在一個函數中檢查和創建新的<p>並調用它。

有沒有更好的方法來構造當前的代碼？

小提琴here

Answer 1

看起來，因爲所需的行爲總是隱藏#optlist並顯示#noresults div。你可以做這樣的事情：

的HTML：

<form id="subform"> 
    <p> 
     <input type="button" id="btn" value="Go!"/> 
    </p> 
    <p id="optlist_container"> 
     <select id="optlist"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
     </select> 
    </p> 
    <p id="noresults" style="display: none;">No results found</p> 
</form> 

而jQuery的：

$('#btn').click(function() { 
    $('#optlist_container').slideUp('slow', function() { 
     $('#noresults').slideDown('slow'); 
    }); 
}); 

我看不出有任何理由要檢查#optlist的，如果你的知名度無論如何總是會隱藏它。你可以很容易地將#noresults元素放在第一位，所以你沒有理由繼續追加它。

Answer 2

你永遠不會有重複的代碼。你總是可以將重複的代碼移動到一個函數中。

例如，使得最小化到您的代碼，以避免重複：

function noResults() { 
    $('<p id="noresults">No results found</p>') 
     .insertAfter('form > p:nth-child(2)') 
     .hide() 
     .slideDown("slow"); 
} 

$("#btn").click(function() { 
    // if address select list is visible slide it up and then slide down new <p> tag 
    if ($('#optlist').is(":visible")) { 
     $('form > p:nth-child(2)').slideUp('slow', noResults); 
    } 
    // else if select list is not visible just slide down the new <p> tag 
    else { 
     noResults(); 
    } 
}); 

我也參加了jQuery的長鏈中的重複代碼，並重新格式化它的可讀性。刪除重複使得更加可行。