Замените часть имени класса значением кнопки при нажатии
Я пытаюсь создать динамическую форму, которая может заменить только часть имени класса при нажатии на ссылку. Например, все входные данные имеют имя класса с окончанием _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>@ Ajay2707, да, это должно заменить, например, textcolor_maincss на textcolor_secondclass
извините, не понял, что произошло, когда щелкнули первую кнопку, вторую кнопку и третью кнопку, укажите список объектов и значение, которое будет обновлено для этих объектов
Просто посмотрите мой ответ, это полезно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Обновлено
Основываясь на ваших комментариях, я обновил код, так что теперь он прикрепляет функцию ко всем ссылкам и получает значение данных 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.info(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>моя ошибка, я не объяснил это хорошо ... ваш код работает на полпути, единственное, чего не хватает, чтобы сохранить начало каждого класса ... например, при нажатии первой кнопки он должен изменить классы ввода с bgcolor_maincss / textcolor_maincss / linkcolor_maincss на следующий: bgcolor_secondcss / textcolor_secondcss / linkcolor_secondcss ... мне нужно просто изменить часть имени класса после "_"
Его код выглядит именно так, просто нужно обновить эту строку, чтобы добавить _: el.classList.add(` ${classArr[0]}_${replaceStr} `)
да, это выглядит лучше, но мне нужно каждый раз, когда нажимается кнопка, она принимает свое значение данных и обновляет имя класса входных данных.. пытался следовать, но не уверен, что это правильно, что я делаю: jsfiddle.net/qvf53smu
ДА! это здорово, теперь только одна небольшая проблема, когда вход имеет более одного имени класса, класс не меняется! см. ввод текстового класса без изменений: jsfiddle.net/qvf53smu/1
Хорошо, в этом случае, вероятно, нужно использовать немного другой подход, когда вы получаете список классов в виде строки, затем используете замену, чтобы переключить часть строки, которую вы хотите изменить, затем удалите текущие классы и установите новую строку как класс
Хорошо, я применил совершенно другой подход с обновленным кодом выше, где я использую и обновляю родительский тип данных обертки в качестве заполнителя для замены текущей подстроки класса. Посмотрите, что вы думаете.
ДА! Потрясающая работа Джон. Теперь он работает как шарм. Большое спасибо за ваше время и усилия для решения проблемы.
Не беспокойся, @Nash, мне было весело решать эту задачу :)
Избавьте себя от головной боли, добавив дополнительный класс к элементам, которыми вы хотите манипулировать.
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>Я получаю Uncaught ReferenceError: по какой-то причине switchClass не определен
Вы добавили скрипт js на свою страницу?
Обновлено: Изначально не совсем понял, после некоторой модификации по ссылке все работает jQuery заменяет строки во многих классах
https://www.anujgakhar.com/2009/04/08/using-jquery-to-change-part-of-the-classname-attribute/
Вам просто нужна некоторая модификация в вашем 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>Он должен просто заменить имя входного класса. Например, с linkcolor_maincss на linkcolor_secondcss.
что означает «значение нажатой кнопки для _secondcss»? Я так понял как заменить значение на _secondcss?