Как получить className внутри функции click?

Question

[Dmitry Abu]

Доброго времени суток
Хочу реализовать смену значения value в поле поиска при событии click но не могу понять как его вывести так чтоб получилась конструкция типа $('.main-' + имя класса li ).show();

<div class="centerbox">
  <div class="main-form-container">
    <!-- <form id="" class="" method="post"> -->
    <form id="" class="" method="">
      <input type="text" class="main-input main-rule1" name="Name1" value="Search by rule 1" onfocus="clearText(this)" onblur="replaceText(this)" />
      <input type="text" class="main-input main-rule2" name="Name2" value="Search by rule-2" onfocus="clearText(this)" onblur="replaceText(this)" />
      <input type="text" class="main-input main-rule3" name="Name3" value="Search bu rule-3" onfocus="clearText(this)" onblur="replaceText(this)" />
      <input type="text" class="main-input main-rule4" name="Name4" value="Search by rule-4" onfocus="clearText(this)" onblur="replaceText(this)" />
      <input type="text" class="main-input main-rule5" name="Name5" value="Search by rule-5" onfocus="clearText(this)" onblur="replaceText(this)" />
      <input type="text" class="main-input main-rule6" name="Name6" value="Search by rule-6" onfocus="clearText(this)" onblur="replaceText(this)" />
      <button type="button" class="main-btn">
        <p class="search-small">Search by</p>
        <p class="search-large">Rule-1</p>
      </button>
      <ul class="search-description">
        <li class="rule1">To Rule-1</li>
        <li class="rule2">To Rule-2</li>
        <li class="rule3">To Rule-3</li>
        <li class="rule4">To Rule-4</li>
        <li class="rule5">To Rule-5</li>
        <li class="rule6">To Rule-6</li>
      </ul>
      <input id="main-submit" class="" type="submit" value="Search" />
    </form>
  </div>
</div>

JS

$('.main-btn').click(function() {
	$('.search-description').slideToggle(100);
});

$('.main-input').hide();
$('.main-rule1').show();

$('.search-description li').click(function() {
	var elems_search_description = $(this).html();
	var toRemove_za = 'За ';
	var newTarget_za = elems_search_description.replace(toRemove_za, '');
	    $(".search-large").html(newTarget_za);
		  $('.search-description').hide();
                  $('.main-' + имя класса li ).show();
});
function clearText(thefield) {
	if (thefield.defaultValue == thefield.value) {
		thefield.value = ""
	}
}

function replaceText(thefield) {
	if (thefield.value == "") {
		thefield.value = thefield.defaultValue
	}
 }

Answer 1

[Dmitry Abu]

Вот такая конструкция сработала

$('.main-btn').click(function() {
	$('.search-description').slideToggle(100);
});

$('.main-input').hide();
$('.main-rule1').show();

$(document).on("click", function(e){
	var id_click = $(e.target).attr("class");
	$('.main-'+id_click).show();
  
  });

$('.search-description li').click(function() {
	var elems_search_description = $(this).html();
	var toRemove_za = 'За ';
	var newTarget_za = elems_search_description.replace(toRemove_za, '');
	    $(".search-large").html(newTarget_za);
		  $('.search-description').hide();
      $('.main-input').hide();
});
function clearText(thefield) {
	if (thefield.defaultValue == thefield.value) {
		thefield.value = ""
	}
}

function replaceText(thefield) {
	if (thefield.value == "") {
		thefield.value = thefield.defaultValue
	}
 }