Как добавить условие в скрипт?

Question

[Insom84]

Есть скрипт который подменяет класс у элемента и делает инпут активным, подскажите пожалуйста, как добавить условие, чтобы он еще этому инпуту добавлял класс, например class="green". И еще момент, например будет еще инпут с id="kargal2", как в эту функцию вписать и для него, чтобы не плодить их для каждого инпута отдельно:

$('#kargal').click(function() {
  var input = $('#street');
  if (input.prop('disabled')) {
    input.prop('disabled', false);
    $(this).removeClass('kar').addClass('gal');
  } else {
    input.prop('disabled', true);
    $(this).removeClass('gal').addClass('kar');
  }
});

Comments

[TRNER]

$(input).addClass("green");
?

[Insom84]

TRNER, а в какую часть кода вставить?

[Александр Черемхин]

...
$(this).removeClass('kar').addClass('gal green’);
...

[Insom84]

Александр Черемхин, здесь класс задается элементу, а не инпуту. Если быть точнее кнопочке которая делает активным инпут при нажатии

[Spartak (Web-StyleStudio)]

Insom84, input.prop('disabled', true).addClass("green");

[Spartak (Web-StyleStudio)]

Insom84,
Можно сократить код немного

$('#kargal').click(function() {
	var input = $('#street');
	$(this).toggleClass("kar gal");
	input.prop('disabled', function(i, v) { return !v; });
});

[Insom84]

Spartak (Web-StyleStudio), а как можно прописать сюда айдишники еще одного или двух инпутов, чтобы не плодить эти коды? Это можно сделать?

[Spartak (Web-StyleStudio)]

Insom84,

а как можно прописать сюда айдишники еще одного или двух инпутов, чтобы не плодить эти коды? Это можно сделать?

Можно конечно! Но лучше использовать класс вместо id

[Spartak (Web-StyleStudio)]

Insom84,
Добавил в ответы пример кода

Answer 1

[Spartak (Web-StyleStudio)]

И еще момент, например будет еще инпут с id="kargal2", как в эту функцию вписать и для него, чтобы не плодить их для каждого инпута отдельно:

Для этого можно использовать какой-нибудь класс для кнопки, например для кнопки класс kargal. Тогда код будет таким для нескольких кнопок и инпутов

<div>
	<input type="text" name="param1" class="firstClass" id="input-1" disabled>
	<button type="button" class="gal kargal" data-id="input-1">Кнопка 1</button>
</div>
<div>
	<input type="text" name="param2" class="firstClass" id="input-2" disabled>
	<button type="button" class="gal kargal" data-id="input-2">Кнопка 2</button>
</div>

$('.kargal').click(function() {
	$(this).toggleClass("kar gal");
	$("#"+$(this).data("id"))
		.prop('disabled', function(i, v) { return !v; })
		.toggleClass("green");
});

Comments

[Insom84]

Спасибо!

Answer 2

[Ruslan]

гугли добавить класс элементу jquery, так интуитивно просто