Question

我需要你的帮助。我是javascript的新手，但我能够使用一些功能创建一个网站。现在我的问题是：

总而言之，我有77个div和77个路径。我希望每个路径都获得与属于路径的div相同的类。每个div和每个路径都有自己的ID。我的索引标记如下所示：

<div id="div_1" class="div_class_1"></div>
<div id="div_2" class="div_class_2"></div>
<div id="div_3" class="div_class_3"></div>
<div id="div_4" class="div_class_4"></div>
  ....
<div id="div-77"></div>

<div id="map">
  <path id="path_1" class="get class from #div_1"></path>
  <path id="path_2" class="get class from #div_2"></path>
  <path id="path_3" class="get class from #div_3"></path>
  <path id="path_4" class="get class from #div_4"></path>
    ...
  <path id="path_77" class="get class from #div_77"></path>
</div>

所以基本上当页面加载时我希望函数读取#div_1的类，将其添加为＃path_1的类。

Answer 1

您可以使用.each方法迭代div元素并根据div id更新路径类元素，这是一个工作示例：

$( document ).ready(function() {

    $('#divs').children('div').each( function () {
    
      var index = $(this).attr('id').split('_')[1];
      console.log(index);
      
      $('#path_' + index).addClass($(this).attr("class"));
    
    });
    
    console.log($('#map').html());
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divs">
  <div id="div_1" class="div_class_1"></div>
  <div id="div_2" class="div_class_2"></div>
  <div id="div_3" class="div_class_3"></div>
  <div id="div_4" class="div_class_4"></div>
  <div id="div_77" class="div_class_77"></div>
</div>

<div id="map">
  <path id="path_1" class=""></path>
  <path id="path_2" class=""></path>
  <path id="path_3" class=""></path>
  <path id="path_4" class=""></path>
  <path id="path_77" class=""></path>
</div>

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

看看这个例子。

您可以使用此方法获取元素的类

elm = document.getElementById('item');
var cName = elm.className;

您可以通过这种方式动态更改类名。

elm.className = 'inactive'; // class name inactive will be applied to the selected element

创建一个for循环，然后你可以动态获取，应用或删除类。

使用另一个divs类将相同的类添加到div

2 个答案: