我正在尝试创建一个动态表单，可以在单击链接时仅替换类名的一部分。例如，所有输入都有一个以 _maincss 结尾的类名。单击时，它应该找到所有这些类，并将它们替换为单击按钮的值 _secondcss。
这可能吗？下面的代码可能不是最好的解决方案，而且无论如何它都不能正常工作。
jQuery(document).ready(function($) {
$('#mainCSS').on('click', function() {
var $row = $(this).closest('.input-row'),
type = $row.data('type'),
selector = $row.data('selector');
$("span, input").removeClass(function(index, className) {
return (className.match(/(^|\s)_maincss\S+/g) || []).join(' ');
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-row" data-type="maincss" data-selector="maincss">
<a id="mainCSS" href="#" class="maincss" value="_maincss">Click here</a><br>
<a id="secondCSS" href="#" class="secondcss" value="_secondcss">Click here</a><br>
<a id="thirdCSS" href="#" class="thirdcss" value="_thirdcss">Click here</a><br>
<input type="text" id="bgcolorMaincss" class="bgcolor_maincss" value=""><br>
<input type="text" id="textcolorMaincss" class="textcolor_maincss" value=""><br>
<input type="text" id="linkcolorMaincss" class="linkcolor_maincss" value=""><br>
</div>最佳答案
已更新
根据您的评论，我更新了代码，以便它现在将一个函数附加到所有链接并获取 onClick 数据值，然后循环所有输入，从父 div 获取当前数据类型作为在替换函数中使用的类名，并使用链接的数据值对每个输入类进行字符串替换。
function updateClassName(replaceStr) {
const parent = document.querySelector('.input-row')
const parentType = parent.dataset.type
const els = document.querySelectorAll('input')
els.forEach(el => {
const currClass = el.className
const newClass = currClass.replace(parentType, replaceStr)
el.classList = newClass
parent.dataset.type = replaceStr
})
}
const links = document.querySelectorAll('a')
links.forEach(link => {
link.addEventListener('click',
(e) => {
const replaceStr = e.target.id.toLowerCase()
console.log(replaceStr)
updateClassName(replaceStr)
}
)
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="input-row" data-type="maincss">
<a id="mainCSS" href="#" class="maincss" data-value="_maincss">Click here</a><br>
<a id="secondCSS" href="#" class="secondcss" data-value="_secondcss">Click here</a><br>
<a id="thirdCSS" href="#" class="thirdcss" data-value="_thirdcss">Click here</a><br>
<input type="text" id="bgcolorMaincss" class="bgcolor_maincss" value=""><br>
<input type="text" id="textcolorMaincss" class="textcolor_maincss" value=""><br>
<input type="text" id="linkcolorMaincss" class="linkcolor_maincss" value=""><br>
<input type="text" class="another-link_maincss testclass">
</div>
</body>
</html>关于javascript - 将部分类名替换为按钮 onclick 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57228675/