Question

我对jQuery相对较新，而我正在努力学习，我担心我正在做的事情......好吧没有错......但不一定是正确的方法。

我有下面的脚本工作正常，并做我需要它做的事情。但是看着它，我不满意，这是实现我的目标的最佳方式还是我太挑剔了？

我正在构建的内容的简要说明：包含动态生成的字段的搜索表单。每个字段都有2个类，用于指定它是否应出现在快速和/或高级搜索表单中。两个链接在两个视图之间切换。

function searchModes() {
    $('p.quicksearch-true.advancedsearch-true').show();
    $('p.quicksearch-true.advancedsearch-false').show();
    $('p.quicksearch-false.advancedsearch-true').hide();
    $('p.quicksearch-false.advancedsearch-false').hide();
    $('#advanced').show();
    $('#quick').hide();

    $('#advanced').click(function () {
        $('p.quicksearch-true.advancedsearch-true').show();
        $('p.quicksearch-true.advancedsearch-false').hide();
        $('p.quicksearch-false.advancedsearch-true').show();
        $('#advanced').toggle();
        $('#quick').toggle();
        return false;
    });
    $('#quick').click(function () {
        $('p.quicksearch-true.advancedsearch-true').show();
        $('p.quicksearch-true.advancedsearch-false').show();
        $('p.quicksearch-false.advancedsearch-true').hide();
        $('#advanced').toggle();
        $('#quick').toggle();
        return false;
    });
}

HTML如下：

<a href="#" id="quick">quick</a><a href="#" id="advanced">advanced</a>
<p class="quicksearch-true advancedsearch-true">
  Some dynamically generated form field that appears in both quick and advanced search
</p>
<p class="quicksearch-true advancedsearch-false">
  Some dynamically generated form field that appears in quick search only
</p>
<p class="quicksearch-false advancedsearch-true">
  Some dynamically generated form field that appears in advanced search only
</p>
<p class="quicksearch-false advancedsearch-false">
  Should never occur, but if it did, it would remain hidden anyway
</p>

所以真的，我正在接受你可能有的任何反馈，这可以帮助我尝试编写更好的jQuery。

非常感谢！

Answer 1

这是一种更好的方法，只需向HTML中添加更多内容，即可将其扩展为任意数量的搜索模式。 jQuery适用于任何数量的模式。 jsFiddle

jQuery的：

$('.search-modes').children().click(function() {
    $(this).hide().siblings().show(); //Hide this button, show the others

    var mode = $(this).data('mode');  //What mode are we in?

    $('.search').children().each(function() {
        if($(this).hasClass(mode))
            $(this).show();           //Show things that are in this mode
        else
            $(this).hide();           //Hide the rest
    });
    return false;
}).first().click();                   //Start in quick mode

HTML：

<div class="search-modes">
    <a href="#" data-mode="quick">quick</a>
    <a href="#" data-mode="advanced">advanced</a>
</div>
<div class="search">
    <p class="quick advanced">
        Some dynamically generated form field that appears in both quick and advanced search
    </p>
    <p class="quick">
        Some dynamically generated form field that appears in quick search only
    </p>
    <p class="advanced">
        Some dynamically generated form field that appears in advanced search only
    </p>
    <p>
        Should never occur, but if it did, it would remain hidden anyway
    </p>
</div>

Answer 2

简而言之，您的代码和标记对于您正在尝试的内容而言过于臃肿。

我会将标记缩减为更像下面的

a）共享字段始终在屏幕上，不会隐藏/显示 b）应该永远不会发生的情况被删除 - 这与问题无关 c）你没有类的真/假版本 - 它们是布尔值;无论有没有

<a href="#" id="quick">quick</a><a href="#" id="advanced">advanced</a>
<p>
  Some dynamically generated form field that appears in both quick and advanced search
</p>
<p class="quicksearch">
  Some dynamically generated form field that appears in quick search only
</p>
<p class="advancedsearch">
  Some dynamically generated form field that appears in advanced search only
</p>

然后你的jQuery更加清晰

$('#quick').toggle();
$('.advancedsearch').hide();

$('#advanced').click(function () {
     $('p.quicksearch').hide();
     $('p.advancedsearch').show();
     $('#advanced').toggle();
     $('#quick').toggle();
});
$('#quick').click(function () {
    $('p.quicksearch').show();
    $('p.advancedsearch').hide();
    $('#advanced').toggle();
    $('#quick').toggle();
});

此处的实例：http://jsfiddle.net/6nkXN/

Answer 3

HTML：

<a href="#" id="quick" class="button" data-fields="q-field">Show Quick Form</a> <a href="#" id="advanced" class="button" data-fields="a-field">Show Advanced Form</a>

<p class="field q-field a-field">
  Some dynamically generated form field that appears in both quick and advanced search
</p>
<p class="field q-field">
  Some dynamically generated form field that appears in quick search only
</p>
<p class="field a-field">
  Some dynamically generated form field that appears in advanced search only
</p>
<p class="field">
  Should never occur, but if it did, it would remain hidden anyway
</p>

Simplified JQuery：

$(function() {
    $('#advanced').show();

    $('.button').click(function(e){
        e.preventDefault();
        $('.button').toggle('show');
        $('.field').hide().parent().find('p.' + $(this).data('fields')).show();
    });
});

http://jsfiddle.net/AlienWebguy/jsGmD/

Answer 4

不改变标记：

function searchModes() {
$('.quicksearch-true').show();
$('.quicksearch-false').hide();
$('#advanced').show();
$('#quick').hide();

$('#advanced').click(function () {
    $('.advancedsearch-true').show();
    $('.advancedsearch-false').hide();
    $('#advanced, #quick').toggle();
    return false;
});
$('#quick').click(function () {
    $('.quicksearch-true').show();
    $('.quicksearch-false').hide();        
    $('#advanced, #quick').toggle();
    return false;
});

我想写更好的jQuery代码

4 个答案:

jQuery的：

HTML：