2

我有以下 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>在 theif和else语句中重复插入 new 。

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

我可以检查它是否存在，if ( $("#noresults").length ) {};但我还需要重复这个（在ifand中else）。

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

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

在这里提琴

4

2 回答 2

4

似乎由于所需的行为始终是隐藏#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 元素放在适当的位置，因此您没有理由继续附加它。

于 2013-03-15T16:02:42.237 回答
1

您永远不必重复代码。您始终可以将重复的代码移动到函数中。

例如，对代码进行最小的更改以避免重复：

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

于 2013-03-15T16:01:38.250 回答