编程逻辑和算法（使用 jQuery）答案

【问题标题】：Programming Logic and Algorithm (using jQuery)编程逻辑和算法（使用 jQuery）
【发布时间】：2014-01-08 03:00:27
【问题描述】：

我正在尝试学习在使用 jquery 或一般编程时如何根据逻辑进行思考；到目前为止，我遇到了这个问题：

HTML

<div id="content">
   <a href="#" class="blog">Blog</a>
   <a href="#" class="portfolio">Portafolio</a>
   <div id="portfolio">
       <ul>
         <li>Item Portafolio</li>
         <li>Item Portafolio</li>
         <li>Item Portafolio</li>
       </ul>
   </div>
   <div id="blog">
       <ul>
         <li>Item Blog</li>
         <li>Item Blog</li>
         <li>Item Blog</li>
       </ul>
   </div> 
</div>

jQuery

   (function() {

        var blog = $('#blog'),
                portfolio = $('#portfolio');

        blog.hide();
        portfolio.hide();

        $.fn.fadeSlideToggle = function(speed, fn) {
          //fadeToggle = opacity
          //slideToggle = height
          return $(this).animate({
              "height" : 'toggle',
              "opacity" : 'toogle'
          }, speed || 400, function() {
              $.isFunction(fn) && fn.call(this);
          });

        };

        $('a').on('click', function(e) {
            e.preventDefault();
            var myString = "#" + $(this).attr('class');

                blog.hide(300);
                portfolio.hide(300);
                $(myString).fadeSlideToggle(800);

        });

    })();

Check the jsfiddle

基本上，它工作正常，当您单击博客按钮时，它会显示博客 div，当您单击投资组合按钮时，它会显示投资组合 div，但是，当我单击博客然后再次单击博客时，问题就开始了，与另一个，我的逻辑隐藏了div并再次显示它，我只想找到一个逻辑，如果我多次单击相同的锚标记，我什么都不做，只有当我单击其他时才会更改。

有什么帮助吗？？

提前致谢。

【问题讨论】：

您应该更改为另一个标题。选择任何随机的 SO 问题：我敢打赌它也是关于“编程逻辑和算法”的。

标签： jquery algorithm logic

【解决方案1】：

我会做这样的事情。

将 myString 更改为 jquery 元素。
为不透明度动画值修复了单词 toogle
在躲藏和逃跑时使用了if fadeSlideToggle 检查元素是否存在当前隐藏（如果它没有隐藏，那么它将隐藏并显示它再次）

添加了stop，这样如果你快速点击按钮，它就不会按下动画就执行多次。

(function(){
var blog = $('#blog');
var portfolio = $('#portfolio');

blog.hide();
portfolio.hide();

$.fn.fadeSlideToggle = function(speed, fn){
    //fadeToggle = opacity
    //slideToggle = height
    return $(this).animate({
        "height": 'toggle',
        "opacity": 'toggle'
    }, speed || 400, function(){
        $.isFunction(fn) && fn.call(this);
    });
};

$('a').on('click', function(e){
    e.preventDefault();
    var myDiv = $("#" + $(this).attr('class'));
    if(myDiv.length && myDiv.is(':hidden')){
        blog.hide(300);
        portfolio.hide(300);
        myDiv.stop(true, true).fadeSlideToggle(800);
    }
});
})();

【讨论】：

工作起来很迷人，但你能告诉我为什么 myDiv.lenght 吗？验证它是否为空白？
@andrewkthx jQuery 对象的length 属性告诉您有多少对象匹配css 查询。基本上它是确保在页面上找到元素$("#" + $(this).attr('class'))。
感谢您的回答，但现在我有一个不同的疑问，如果我们删除该条件它可以完美运行，那么它有多大必要？？？只是想知道，我只是想学习:)
@andrewkthx 该条件确保如果不应该发生任何事情。如果您离开条件，正在发生的事情是打开的 div 开始隐藏，然后 stop(true, true) 在过程中停止隐藏并由于淡入淡出切换显示它。我不会说这是一个好主意，因为无缘无故执行了 2 个操作。

【解决方案2】：

让我们在执行动画之前检查 div 的不透明度，如下所示：

if(!$(myString).is(":visible")){
    blog.hide(300);
    portfolio.hide(300);

    $(myString).fadeSlideToggle(800);
}

在此处查看 jsFiddle：jsFiddle。

【讨论】：