javascript - 修改 anchor 元素的 href 属性值

Question

我有一个脚本可以修改 anchor 的 href 属性值 <a>元素。对于移动开发，它应该只在特定浏览器窗口大小以下触发。以下是我目前正在处理的脚本。

JS-http://jsfiddle.net/eof8kpsj/1/

(function($){
    'use strict';



    var mobileMenuDrawer = {

        init : function() {

            $('.region-primary-menu').addClass('primary-mobile-menu');
            $('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
            $('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
                $(this).closest('.mobile-menu-item').toggleClass('-active');
            })
        },

        clear : function() {
            $('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
        }
    }

    var addHash = {

        init : function() {

            if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {

                $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
                    // console.log($(this).attr('href'));
                    let currentUrl = $(this).attr('href');

                    if($(this).prop('href') != '#' + currentUrl) {
                        $(this).prop('href', '#' + currentUrl);
                    }
                });
            }

            else {

                $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {

                    $(this).removeAttr('#');

                });

            }
        }
    }


    $(document).ready(function() {

        if ($(window).outerWidth() <= 1024) {
            mobileMenuDrawer.init();
        }

        else {
            mobileMenuDrawer.clear();
        }

        addHash.init();


    });

    $(window).on('resize', function() {

        if ($(window).outerWidth() <= 1024) {
            mobileMenuDrawer.init();
            addHash.init();
        }

        else {
            mobileMenuDrawer.clear();
        }
    });



})(jQuery)

---

此处的逻辑基本上修改了 anchor 上的 href 属性值 <a>元素。它仅向现有 href 添加哈希值(value)。唯一的问题是，每当我尝试调整大小时，它都会不断触发逻辑或事件。我已经添加了 condition如果它有一个 hash 到检查值包含在 href 中属性，但问题仍然存在。

    var addHash = {

        init : function() {

            if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {

                $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
                    // console.log($(this).attr('href'));
                    let currentUrl = $(this).attr('href');

                    if($(this).prop('href') != '#' + currentUrl) {
                        $(this).prop('href', '#' + currentUrl);
                    }
                });
            }

            else {

                $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {

                    $(this).removeAttr('#');

                });

            }
        }
    }

Answer 1

解决方法在这里

(function($){
  'use strict';  

  var mobileMenuDrawer = {  
    init : function() {
      $('.region-primary-menu').addClass('primary-mobile-menu');
      $('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
      $('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
        $(this).closest('.mobile-menu-item').toggleClass('-active');
      })
    },
    
    clear : function() {
      $('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
    }
  }
    
  var addHash = {
    init : function() {
      if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
        $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
          let currentUrl = $(this).attr('href');
    
          if(currentUrl.indexOf('#') === -1) {
            $(this).prop('href', '#' + currentUrl);
          }
        });
      } else {
        $('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
     
          let currentUrl = $(this).attr('href');
          currentUrl = currentUrl.replace('#', '');
          $(this).attr('href', currentUrl);
                        
        });
      }
    }
  }
     
  $(document).ready(function() {
    if ($(window).outerWidth() <= 1024) {
      mobileMenuDrawer.init();
    } else {
      mobileMenuDrawer.clear();
    }
    addHash.init();
  });
    
  $(window).on('resize', function() {
    if ($(window).outerWidth() <= 1024) {
      mobileMenuDrawer.init();
      addHash.init();
    } else {
      mobileMenuDrawer.clear();
    }
  });
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="region-primary-menu primary-mobile-menu">
    <li class="mobile-menu-item">
        <a href="link" class="link">Link</a>
    </li>
     <li class="mobile-menu-item">
        <a href="link" class="link">Link</a>
    </li>
     <li class="mobile-menu-item">
        <a href="link" class="link">Link</a>
    </li>

</ul>

希望对你有帮助