我如何才能更有效地编写此内容？

Question

Whether or not this is the best way to do this, I don't care - but in this case I have 2 identical search bars which I toggle based on screen width. One shows for mobile, one shows for desktop. The code below works well but there's so much repetition, there must be a better way to write it.

The HTML:

<div class="search-wrp">
    <input type="text" class="search" data-which="mobile" value="Search" />
    <input type="button" value="&nbsp;" class="go sprite" data-which="mobile" />
</div>

<div class="search-wrp">
    <input type="text" class="search" data-which="desktop" value="Search" />
    <input type="button" value="&nbsp;" class="go sprite" data-which="desktop" />
</div>

The JS:

 $('.search').focus(function () {
    var viewport = $(this).attr('data-which');
    if ($('.search[data-which="' + viewport + '"]').val().toLowerCase() == "search") {     $('.search[data-which="' + viewport + '"]').val(""); }
}).focusout(function () {
    var viewport = $(this).attr('data-which');
    if ($('.search[data-which="' + viewport + '"]').val() == "") { $('.search[data-which="' + viewport + '"]').val("Search"); }
}).keypress(function (event) {
    var viewport = $(this).attr('data-which');
    if (event.keyCode == '13') {
        event.preventDefault();
        $('.go[data-which="' + viewport + '"]').click();
    }
});

$('.go').click(function () {
    var viewport = $(this).attr('data-which');
    if ($('.search[data-which="' + viewport + '"]').val() == null || $('.search[data-which="' + viewport + '"]').val() == "Search") {
        alert("Please enter a search phrase.");
    } else {
        window.location = "http:" + "//" + window.location.host + "/Search.aspx?phrase=" + $('.search[data-which="' + viewport + '"]').val();
    }
});

I would like to use a variable for '.search[data-which="' + viewport + '"]' and I'd also like to be able to define viewport just once in a way that still makes it usable within the functions. However my attempts have all run into scope issues.

Answer 1

Rather than repeatedly call $('.search[data-which="' + viewport + '"]') inside each function, store it in a variable. Eg:

$('.search').focus(function () {
    var viewport = $(this).attr('data-which'),
        search = $('.search[data-which="' + viewport + '"]');
    if (search.val().toLowerCase() == "search") { search.val(""); }
}).focusout(function () {
    var viewport = $(this).attr('data-which'),
        search = $('.search[data-which="' + viewport + '"]');
    if (search.val() == "") { search.val("Search"); }
}).keypress(function (event) {
    var viewport = $(this).attr('data-which');
    if (event.keyCode == '13') {
        event.preventDefault();
        $('.go[data-which="' + viewport + '"]').click();
    }
});

$('.go').click(function () {
    var viewport = $(this).attr('data-which'),
        search = $('.search[data-which="' + viewport + '"]');
    if (search.val() == null || search.val() == "Search") {
        alert("Please enter a search phrase.");
    } else {
        window.location = "http:" + "//" + window.location.host + "/Search.aspx?phrase=" + search.val();
    }
});

Always store the return value of a function if you need that value more than once.