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的长链中的重复代码，并重新格式化它的可读性。删除重复使得更加可行。