如果slideUp元素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()然后slideDown()一个新的<p>标签，否则只是slideDown()一个新的<p>标签(如果#optlist当前隐藏)。

这在上面工作得很好，尽管它有点笨拙，例如，我必须在if和else语句中重复插入新的<p>。

除此之外，还有一个小错误，如果#noresults <p>标签已经存在，它目前将添加另一个，如果它已经存在，我怎么能让它闪现当前的#noresults ?

我可以检查它是否存在使用if ( $("#noresults").length ) {};，但我也需要重复这一点(在if和else)。

我可以把新的<p>的检查和创建放在一个函数中，并对它进行调用。

是否有更好的方法来构建当前的代码?

这里的

小提琴

Answer 1

似乎，由于期望的行为总是隐藏#optlist和显示#noresultsdiv，你可以这样做:

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长链重新格式化以提高可读性。删除重复使这更可行。