JQuery if then else 使用 URL 解析器插件追求优雅需要 2

Question

这是我关于这个主题的第二个问题，原始问题可以在这里找到: JQuery if then else using URL parser plugin, there must be a more elegant solution!

如果你坐得舒服，我就开始了!

我已经构建了一个包含问题列表的网页。每个问题后面都有一个包含在 Div 中的答案。 HTML 看起来像这样:

<div class="questions_main_box">
   <h2>common questions:</h2>
   <ul>
      <li>
         <h3 id="question1">question number 1</h3>
     <div id="answer1"> answer number 1</div>
      </li>
      <li>
         <h3 id="question2">question number 2</h3>
     <div id="answer2"> answer number 2</div>
      </li>
      etc etc...
   </ul>
</div>

我已经使用 jQuery 编写了一些代码来调整此列表的行为方式。这个想法是所有答案 Div 都被 jQuery 隐藏，然后通过以下两种方式之一显示它们:

用户点击相关的 h3 标题

或

用户单击另一个页面中某个问题的链接。

如果用户来自其他页面，则应显示他们单击的问题，并隐藏所有其他问题。

我已经完成了这项工作，但我的代码效率相当低。在我之前解释这个问题时，我得到了一个答案，但我收到的答案有一个不良的副作用:它们阻止菜单显示任何答案，除非 URL 中有 anchor 链接。例如:

http://mydomain.com/questions.html行不通

但是

http://mydomain.com/questions.html#question1会起作用的!

我需要两者都工作!正如我所说，我的版本确实可以两种方式工作，但相当笨重，我确信一定有更好的表达方式。下面是更高效的代码:

if 
($.url.attr('anchor') == 'question1'){
        $('#answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
        $.scrollTo('#question1');
}
else if
($.url.attr('anchor') == 'question2'){
        $('#answer1, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
        $.scrollTo('#question2');
}
else if
($.url.attr('anchor') == 'question3'){
        $('#answer1, #answer2, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
        $.scrollTo('#question3');
}
else if
($.url.attr('anchor') == 'question4'){
        $('#answer1, #answer2, #answer3, #answer5, #answer6, #answer7, #answer8').hide();
        $.scrollTo('#question4');
}
else if
($.url.attr('anchor') == 'question5'){
        $('#answer1, #answer2, #answer3, #answer4, #answer6, #answer7, #answer8').hide();
        $.scrollTo('#question5');
}
else if
($.url.attr('anchor') == 'question6'){
        $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer7, #answer8').hide();
        $.scrollTo('#question6');
}
else if
($.url.attr('anchor') == 'question7'){
        $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer8').hide();
        $.scrollTo('#question7');
}
else if
($.url.attr('anchor') == 'question8'){
        $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7').hide();
        $.scrollTo('#question8');
}
else if
($.url.attr('anchor') != 'question1, question2, question3, question4, question5, question6, question7, question8'){
        $('.questions_main_box ul li div').hide();
};

它工作正常，但相当笨重，在它当前的版本中，这也意味着如果我想添加更多问题和答案，我必须将它们显式添加到 ID 列表中。最好不必这样做!

为了让您了解整个情况，这里是代码的其余部分:

$('.questions_main_box h3').addClass('js_main_box');
    $('.questions_main_box h3').hover(
        function(){
            $(this).addClass('js_main_box_highlight');
        },
        function(){
            $(this).removeClass('js_main_box_highlight');
        }
    );

    $('.questions_main_box h3').click(
            function(){
                if ($(this).next().is(':visible')){
                    $(this).next().hide('fast');
                    }
                else if ($(this).next().is(':hidden')){
                    $(this).next().show('fast');
                    }
            }
    );

因此，所有这些都按原样运行，我实际上只是在寻找提高其效率的方法。

我发现我正在做的事情有一个问题，我一生都无法弄清楚为什么会发生这种情况，也不知道如何解决它:

该问题仅在 Firefox 中出现(我测试过 3.0.9 和 3.1b3)

当我点击其中一个 anchor 链接转到相关问题和答案时，Firefox 会跳转到正确的页面，并且可以看到正确的答案，但页面不会垂直滚动到正确的位置 anchor 标记开始。这意味着，当用户第一次到达问答页面时，通常在屏幕上看不到用户单击的问题!这只发生在 Firefox 中。 Safari 和 Opera 去对了地方。我确信这一定与 Div 被隐藏有关，因为当 javascript 关闭并且列表正常显示时， anchor 标记在 Firefox 中工作正常。我发现这真的很奇怪，我不知道如何修复它，或者它是否只是一个没有解决方法的错误。任何有关我的问题的信息将不胜感激。

感谢您花时间查看此内容!

伊恩。

附注

我正在使用此处找到的 JQuery URL 解析器插件:http://projects.allmarkedup.com/jquery_url_parser/

Answer 1

我建议使用 CSS 选择器来隐藏您的答案。为此，您必须在答案中添加一个类属性。

<div class="questions_main_box">
   <h2>common questions:</h2>
   <ul>
      <li>
         <h3 id="question1">question number 1</h3>
     <div id="answer1" class="answer">answer number 1</div>
      </li>
      <li>
         <h3 id="question2">question number 2</h3>
     <div id="answer2" class="answer">answer number 2</div>
      </li>
      etc etc...
   </ul>
</div>

然后使用jquery，您可以使用此隐藏所有答案

$('.answer').hide();

所以，请与您的其他问题放在一起 JQuery if then else using URL parser plugin, there must be a more elegant solution! 将会是:

var match = jQuery.url.attr('anchor').match(/^question([0-9]+)$/);
if (match && match.length > 0) {
    $('.answer').hide();
    $('#answer' + match[1] ).show();
} 

或者像这样在一行上。

 $('.answer').hide().is('#answer' + match[1]).show();