Question

如何获取此URL锚标记哈希值？我正在尝试此代码，但这显示未定义。

HTML和Jquery 3.2：

$(function(){
    // get current url hash values.
    var current = window.location.hash;
	
    $('#navbarSupportedContent ul li a').each(function(){
        var $this = $(this);
        alert($this.hash);       
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#aboutus">About Us</a>
      </li>
    <ul>
    </div>

Answer 1

undefined不是jquery object的属性，而是HTMLAnchorElement（从Element类扩展的类）的属性，因此您正在获取$(this)。

因此，您可以使用this来引用实际元素，而不是使用$(function() { // get current url hash values. var current = window.location.hash; $('#navbarSupportedContent ul li a').each(function() { alert(this.hash); }); });创建jQuery对象：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="index.php#aboutus">About Us</a>
    </li>
  </ul>
</div>

<div class="contactForm">   
            <h3>Share your contact Details</h3>
            <form id=register>
              <div class="form-group">
                <input type="text" id="team" class="form-control" placeholder="Enter Team Name">
              </div>
              <div class="form-group">
                <input type="text" id="m1" class="form-control" placeholder="Member#1">
              </div>
              <div class="form-group">
                <input type="text" id="m2" class="form-control" placeholder="Member#2">
              </div>
              <div class="form-group">
                <input type="text" id="m3" class="form-control" placeholder="Member#3">
              </div>
              <div class="form-group">
                <input type="text" id="m4" class="form-control" placeholder="Member#4">
              </div>

              <div class="form-group">
                <input type="text" id="email" class="form-control" placeholder="Enter your Email ID">
              </div>

              <div class="form-group">
                 <input type="text" id="number" class="form-control" placeholder="Enter your Mobile No.">
              </div>
              <div class="form-groud">

                  <a type="submit" onclick=register() class="btn">Register</a></div>
            </form>
        </div>

Answer 2

您真的不需要jquery，hash是锚点上的香草Js道具 https://www.w3schools.com/jsref/prop_anchor_hash.asp

$(function() {
  // get current url hash values.
  var current = window.location.hash;

  $('#navbarSupportedContent ul li a').each(function() {
    alert(this.hash);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="index.php#aboutus">About Us</a>
    </li>
  </ul>
</div>

Answer 3

您只需选择元素，然后检查是否href是否包含#。如果包括，则用#对其进行拆分，并使用pop

获取值

function getMeHash(){
  let anchors = document.querySelectorAll('#navbarSupportedContent ul li a')
  let hashes = []
   anchors.forEach(e=>{
    if(e.href.includes('#')){
      hashes.push(e.href.split('#').pop())
    }
   })
   console.log(hashes)
}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#aboutus">About Us</a>
      </li>
    <ul>
</div>

<button onclick='getMeHash()'>Get me hash </button>

如何在jQuery中获取锚标记URL哈希值？

3 个答案: