JQuery не добавляет класс к элементу должным образом
Я работал над новой функцией для своего небольшого проекта, который принимает команду из ввода (записать во ввод: создать поле с именем somename), и если он обнаружит, что команда «создать поле с именем somename», он создаст div с классом somename. Но когда я пытаюсь добавить стиль к элементу div, ничего не происходит. Проблема заключается в строке над оператором switch break;.
// checks if word is in string s
function wordInString(s, word){
return new RegExp( '\\b' + word + '\\b', 'i').test(s);
}
$('input').keypress(function(e) {
if (e.which == 13) {
let input = $(this).val();
console.info("Initial Input: " + input);
const Commands = ['call it', 'name it', 'make a box called'];
split_input = input.split(" ");
var arrayLength = Commands.length;
for (var i = 0; i < arrayLength; i++) {
command = Commands[i];
console.info(command);
let wordFound = wordInString(input, command);
if (wordFound) {
console.info("Command found: " + command)
switch (command) {
case "make a box called":
let name = split_input[4];
console.info("Box name: " + name)
$('.Dragon').append($('<div>', {class: name}));
// this is the problem line, I do not quite get why it won't w ork
$('.'.concat(name)).addClass({'background-color': 'green', 'height': '50px', 'width': '50px'});
break;
default:
}
}
}
$(this).val('');
}
});<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<!-- Dependencies -->
<script src = "https://code.jquery.com/jquery-3.3.1.min.js" charset = "utf-8"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" charset = "utf-8"></script>
<script src = "https://code.jquery.com/color/jquery.color-2.1.2.min.js" charset = "utf-8"></script>
<title>CodeDragon</title>
<link rel = "stylesheet" href = "/master.css">
</head>
<body>
<div class = "Dragon"></div>
<input type = "text" name = "_input" value = "">
<script src = "script.js" charset = "utf-8"></script>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны использовать метод jquery css () вместо addClass там, используйте тот же синтаксис, что и в:
$('.'.concat(name)).css({'background-color': 'green', 'height': '50px', 'width': '50px'});
@Holiday ТАК способ поблагодарить людей - это также принимать ответ, который помог вам решить вашу проблему наилучшим образом. Для других это также означает, что ваша проблема решена. Как только вы получите достаточно репутация, от Вы будете в состоянии до проголосовать за.
@ghybs Пока я не смогу проголосовать, я буду благодарить людей, которые мне помогли, что является обычным порядком.
@Holiday убедитесь, что вы внимательно прочитали: я никогда сказал не благодарить. Но на также «принять» один из ответов. У вас должна быть кнопка принятия в левом верхнем углу ответов. См. Что мне делать, когда кто-то отвечает на мой вопрос?
Похоже, вы пытаетесь использовать неправильный метод. Попробуйте css вместо addClass
.addClass({'background-color': 'green', 'height': '50px', 'width': '50px'});
Должно быть
.css({'background-color': 'green', 'height': '50px', 'width': '50px'});
Для большей ясности причина, по которой вы не можете использовать метод .addClas (), заключается в том, что «background-color» не является классом, это свойство css. Таким образом, вы должны использовать метод .css () для его установки.
.css({'background-color': 'green', 'height': '50px', 'width': '50px'});
О боже, мой мозг подумал, что я написал css вместо addClass, должно быть, это было написано без всякой причины. Еще одна пара глаз творит чудеса, большое спасибо, Мохаммад !!