javascript - 谁来查找动态类名

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 6 年前。

Improve this question

我们正在尝试动态查找类名，但当我们单击其他链接时，我们也只能找到第一个 div 名称。

js代码:-

$(document).ready(function(){
$('#foot-map .maplink a').on('click', function(){
    var mapFlag = $(this).closest('#foot-map').find('.map-area div').attr('class');

    alert(mapFlag);

});

});

请在此链接上找到完整代码:- Jsfiddle

Answer 1

您只能看到第一个 div 的值的原因是 jQuery 集合中有多个元素，并且在该集合上调用 attr() 将仅返回第一个元素。

要实现您的要求，您可以在 data 元素上放置一个额外的 <a> 属性，该属性可用于定位与 .map-area 相关的特定 a div，如下所示:

$(document).ready(function() {
  $('#foot-map .maplink a').on('click', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    var mapFlag = $(this).closest('#foot-map').find('.map-area .' + target).attr('class');
    alert(mapFlag);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foot-map">
  <ul class="maplink">
    <li><a id="uktabfoot" data-target="uk" class="active" href="#">UK</a></li>
    <li><a id="maltatabfoot" data-target="malta" href="#">MALTA</a></li>
    <li><a id="indiatabfoot" data-target="india" href="#">INDIA</a></li>
  </ul>
  <div class="map-area">
    <div class="uk map-hover">
      <a href="#"><b></b></a>
      <span class="flag">United Kingdom</span>
    </div>
    <div class="malta">
      <a href="¢"><b></b></a>
      <span class="flag">Malta</span>
    </div>
    <div class="india">
      <a href="#"><b></b></a>
      <span class="flag">India</span>
    </div>
    <div class="china">
      <a href="#"><b></b></a>
      <span class="flag">China</span>
    </div>
  </div>
</div>

请注意，将 javascript: 放入 href 属性中并不理想。如果您不希望 URL 通过单击该元素而受到影响，请将 href 设为 # 并使用 return false 阻止该事件，或者最好在引发的事件上调用 preventDefault() 。