将一个类切换到具有特定类的多个 SVG 路径

Posted 2023-03-28

【中文标题】将一个类切换到具有特定类的多个 SVG 路径

【英文标题】：Toggle a class to multiple SVG paths with a specific class

【发布时间】：2021-12-27 00:23:31

【问题描述】：

我正在尝试使用 Jquery 在 SVG 元素上切换类，但由于某种原因没有任何运气。有多个路径具有相同的类，我想同时打开/关闭它们。

<path class="fracture-details" d="M360.5,671.5v9h-23v-20h12v11H360.5z"/>
<path class="fracture-lines" d="M285.5,673c0-0.4,0-16.5,0-24.5H246h45.5v27"/>
<path class="fracture-lines" d="M102,542.5l-2.5,3l-1,5l1,2.5l2,1l3.5,1h3l3,2l3.5-1l2-3.5l0.5-9.5l-1-7.5l-1-3"/>
<path class="fracture-lines" d="M144.5,463v-41.5"/>
<path class="fracture-details" d="M329.5,66.5L330,62l17.5,3v8.5H345l-0.5,5.5l-7-0.5L337,80l-7-1l0.5-5.5l-1-1l-6-0.5l1-5.5H329.5z"/>
<path class="fracture-lines" d="M378.5,170v-24"/>
<path class="fracture-details" d="M270.5,365.5h-11v18h11V365.5z"/>

我目前使用的jquery如下：

if ($(".fracture-details").hasClass("toggleMap")) 
    $(".fracture-details").attr("class", "fracture-details");
 else 
    $(".fracture-details").attr("class", "fracture-details toggleMap");

这将在点击时触发。 else 部分似乎有效，但第一个 if 语句永远不会触发。

【问题讨论】：

除了下面的工作示例之外，您的代码应该也可以工作，如果它不工作，您可能使用的是旧版本的 jQuery。尝试使用 2.2.0 或更高版本。

这实际上是一个问题，虽然最后我选择了@prettyInPink的解决方案。我正在使用：

【参考方案1】：

似乎与addClass 和removeClass 一起工作正常。

const fractureDetails = $(".fracture-details");
const btn = $('button');

btn.on('click', function() 
  addRemoveClass(fractureDetails, 'toggleMap');
);

function addRemoveClass(el, className)
  if( el.hasClass(className) )
    el.removeClass(className)
   else 
    el.addClass(className)
  


addRemoveClass(fractureDetails, 'toggleMap');

svg 
  width: 50px;
  height: auto;

.toggleMap 
  fill: red;


button 
  display: block;
  margin-bottom: 1em;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Class</button>
<svg class="svg-icon" viewBox="0 0 20 20">
  <path class="fracture-details" d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
</svg>

正如@Gleb Kemarsky 所说，您可以使用内置的toggleClass。

const fractureDetails = $(".fracture-details");
const btn = $('button');

btn.on('click', function() 
  fractureDetails.toggleClass('toggleMap');
);

svg 
  width: 50px;
  height: auto;

.toggleMap 
  fill: red;


button 
  display: block;
  margin-bottom: 1em;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Class</button>
<svg class="svg-icon" viewBox="0 0 20 20">
  <path class="fracture-details" d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
</svg>

【讨论】：

没有事件监听器，这个 javascript 什么也做不了。

@Sean，不确定你的意思？

@Sean，在dom ready 上，如果需要，它也会触发它。

你可以改用api.jquery.com/toggleclass

感谢您编辑以包含活动。