jQuery 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 当前隐藏)。

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

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

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

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

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

fiddle 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 元素，这样您就没有理由继续附加它。