jquery - 编程逻辑和算法(使用 jQuery)

Question

我正在尝试学习如何在使用 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 并再次显示它，我只是想找到一个逻辑，如果我多次单击同一个 anchor 标记，我什么都不做，只有在我单击其他时才改变。

有什么帮助吗？？

提前致谢。

Answer 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);
      }
  });
  })();