如何將一個類添加到svg路徑？

首先我檢查點擊的按鈕父對象是否具有給定路徑的相同類，然後如果路徑類匹配父按鈕類，它應該向路徑本身添加一個類。如何將一個類添加到svg路徑？

<ul> 
    <li class="modern"> 
    <button>Ex 1</button> 
    </li> 
    <li class="classic"> 
    <button>Ex 2</button> 
    </li> 
<ul> 

<svg> 
    <path class="modern"></path> 
    <path class="classic"></path> 
</svg> 

$("button").on("click", function() { 
    var periodClass = $(this).parent().attr("class"); 
    $("svg path").each(function() { 
     $("svg path").not('.'+periodClass).removeClass("active"); 
     $('svg path.'+periodClass).target.classList.add('active'); 
    }); 
});

也試過

$('svg path.'+periodClass).addClass('active');

來源

2017-03-05 rob.m

的[添加類SVG路徑元素]可能的複製（ http://stackoverflow.com/questions/36130050/add-class-on-svg-path-element） – Venugopal

http://stackoverflow.com/questions/36130050/add-class-on-svg-path-element – Venugopal

試過，首先看到答案。但它不在這裏工作，上面的代碼反駁了這些傢伙說的，一個來自e的單方。這不在這裏，因爲我不知道我會在哪裏定義「e」。在我的案例 –

$("button").on("click", function() { 
    var periodClass = $(this).parent().attr("class"); 
    $("svg path").each(function() { 
     var cl = $(this).attr('class'); 
     $(this).attr('class', cl.includes(periodClass) ? cl + ' active' : cl.replace(/active/g, '')); 
    }); 
});

檢查這個fiddle

來源

2017-03-05 17:57:53 Venugopal

這是刪除所有類，只留下新的類，基本上不會將它添加到列表 –

當單擊'Ex1'按鈕，'活動'類被添加到'.modern'路徑並從中刪除所有其他路徑。對於'Ex2'，它是'.classic'。這不是你想要的嗎？ – Venugopal

你不需要在每個循環中使用正則表達式進行測試！ – scraaappy

所以你必須使用屬性Jquery的不能在一個類添加到SVG。

此外，您並不需要每個循環，因爲您已經知道每個路徑上都有特定的類。所以，你可以有：

$("button").on("click", function() { 
    var periodClass = $(this).parent().attr("class") 

    //here you use .attr and .replace to remove the active class from your svg path 
    $("svg .active").attr("class", $("svg .active").attr("class").replace("active","")); 

    //here you set the new active element 
    $("svg ."+periodClass).attr("class", periodClass+" active"); 

});

附：在手機上的IM打字

來源

2017-03-05 17:51:07 Harry

只需將$（「svg .periodClass」）編輯爲$（「svg。」+ periodClass）即可將是正確的答案 –

不添加類 –

jquery無法從svg元素添加/刪除類！ – scraaappy

使用queryselector或看到： JQuery can't add a class to an SVG

$("button").on("click", function(e) { 
 
    var periodClass = $(this).parent().attr("class"); 
 
    var paths = document.querySelectorAll("path"); 
 
    var pathToActive = document.querySelector("path."+periodClass); 
 
    for (var i=0;i<paths.length;i++) { 
 
    paths[i].classList.remove("active"); 
 
    } 
 
    pathToActive.classList.add('active'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="modern"> 
 
    <button>Ex 1</button> 
 
    </li> 
 
    <li class="classic"> 
 
    <button>Ex 2</button> 
 
    </li> 
 
<ul> 
 

 
<svg> 
 
    <path class="modern"></path> 
 
    <path class="classic"></path> 
 
</svg>

來源

2017-03-05 18:35:20 scraaappy

如何將一個類添加到svg路徑？

回答

相關問題