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()新的标记，否则只有slideDown()新的 1}}标记（如果当前隐藏了#optlist）。

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

除此之外，还有一个小错误，如果#noresults 标记已经存在，它目前会添加另一个标记，如果它已经存在，怎么能让它闪现当前#noresults ？

我可以使用if ( $("#noresults").length ) {};查看是否存在，但我还需要重复此操作（在if和else中）。

我可以在函数中检查和创建新的并调用它。

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

小提琴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链，并重新格式化它以便于阅读。删除重复使得更可行。

jQuery slideUp元素A如果可见则滑动元素B

2 个答案: