将类名的一部分替换为按钮onclick的值
[英]Replace part of a classname with a value of a button onclick
问题描述
I am trying to create a dynamic form that can replace just a part of a class name on link click. 
我正在尝试创建一个动态表单，该表单可以在链接单击时仅替换类名称的一部分。 For example, all inputs have a class name with the ending _maincss. 例如，所有输入的类名都以_maincss结尾。 On click it should find all of these classes and replace them with the value of the clicked button to _secondcss. 单击时，它应该找到所有这些类，并将它们替换为_secondcss的单击按钮的值。
Is that possible? 那可能吗？ The following code might be not the best solution and anyway it's not working well. 以下代码可能不是最佳解决方案，无论如何都无法正常工作。
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>
3 个解决方案
解决方案1
1 已采纳 2019-07-27 03:00:02
Updated 更新
Based on the comments from you I have updated the code so that it now attaches a function to all links and gets the data-value onClick, it then loops all inputs, gets the current data-type from the parent div as the class name to use in the replace function and uses the data-value of the link to do a string replace for each input class. 根据您的意见，我更新了代码，现在它将函数附加到所有链接并获取数据值onClick，然后循环所有输入，从父div获取当前数据类型，作为类名。在replace函数中使用，并使用链接的data-value对每个输入类进行字符串替换。
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>
解决方案2
0 2019-07-27 04:10:20
Save yourself the headache by adding an extra class to the elements you would like to manipulate. 通过为您要操纵的元素添加额外的类来减轻您的头痛。
function switchClass(callee){ const prefix_classes = ['bgcolor','textcolor','linkcolor']; //add extra class(dynamic) to elements you want to manipulate then retrieve by className var dynamic_class_elements = document.getElementsByClassName("dynamic"); for(var i = 0; i < dynamic_class_elements.length; i++) { var dynamic_element = dynamic_class_elements.item(i); var current_classes = dynamic_element.className; var current_prefix = ''; for (var index = 0; index < prefix_classes.length; index++) { if(current_classes.indexOf(prefix_classes[index]) !== -1){ //element class contains one of the predefined prefix //so we keep track the value current_prefix = prefix_classes[index]; break; } } //replace old element classes with new ones var new_class = current_prefix + callee.getAttribute('data-value'); dynamic_element.className = new_class + ' dynamic'; dynamic_element.value = dynamic_element.className; } }
<!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" data-selector="maincss"> <a id="mainCSS" href="#" class="maincss" data-value="_maincss" onclick="switchClass(this)">Click here</a><br> <a id="secondCSS" href="#" class="secondcss" data-value="_secondcss" onclick="switchClass(this)">Click here</a><br> <a id="thirdCSS" href="#" class="thirdcss" data-value="_thirdcss" onclick="switchClass(this)">Click here</a><br> <input type="text" id="bgcolorMaincss" class="bgcolor_maincss dynamic" value=""><br> <input type="text" id="textcolorMaincss" class="textcolor_maincss dynamic" value=""><br> <input type="text" id="linkcolorMaincss" class="linkcolor_maincss dynamic" value=""><br> </div> </body> </html>
解决方案3
0 2019-07-27 04:39:13
Updated : Initially did not understand clearly, after some modification based on the link its works jQuery replace strings in many classes 更新 ：最初不清楚，在基于链接进行了一些修改之后， jQuery的作品替换了许多类中的字符串
https://www.anujgakhar.com/2009/04/08/using-jquery-to-change-part-of-the-classname-attribute/ https://www.anujgakhar.com/2009/04/08/using-jquery-to-change-part-of-the-classname-attribute/
You just need some modification in your jquery 您只需要在jquery中进行一些修改
jQuery(document).ready(function($) { $('.maincss').on('click', function() { setClasses(this,'maincss') }); $('.secondcss').on('click', function() { setClasses(this,'secondcss') }); $('.thirdcss').on('click', function() { setClasses(this,'thirdcss') }); function setClasses(control, classname) { $("input").each(function(index ) { $(this).attr ("class",this.className.replace(/maincss/ig,classname).replace(/secondcss/ig,classname).replace(/thirdcss/ig,classname)); $(this).val(classname); }); } });
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.