Взять id нужно элемента

145

27 октября 2019, 11:40

Подскажите пожалуйста, как при нажатии на input id="id[1]" показать value input class="id[1]", а при нажатии на второй input следовательно value второго inputa.

function showMessage() { 
var id = document.getElementsByClassName('id').value; 
  alert( id ); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="id[1]" type="text" onclick="showMessage()"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text" onclick="showMessage()"> 
<input class="id[2]" type="hidden" value="35">

Answer 1

$("input[id^='id'").click(function(){ 
  var id=$(this).attr('id'); 
  var value=$(`input[class='${id}']`).val(); 
  alert(value); 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="id[1]" type="text"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text"> 
<input class="id[2]" type="hidden" value="35">

Answer 2

$("input").on("click", function() { 
  var inputId = $(this).attr("id"); 
  console.log($(`input[class='${inputId}']`).val()) 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="id[1]" type="text"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text"> 
<input class="id[2]" type="hidden" value="35">

Answer 3

function showMessage(element) { 
  let input = document.getElementsByClassName(element.id)[0]; 
  alert(input.value); 
}

<input id="id[1]" type="text" onclick="showMessage(this)"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text" onclick="showMessage(this)"> 
<input class="id[2]" type="hidden" value="35">

Answer 4

В данном подходе две ошибки:

document.getElementsByClassName возвращает коллекцию элементов, а у коллекции нет свойства value
В разметке нет элементов с классом id.

Для получении в обработчике элемента по которому кликнули, можно передать его в качестве параметра:

<input id="id[1]" type="text" onclick="showMessage(this)">

Далее, добавить параметр в определении обработчика

function showMessage(el) {

После этого, у полученного элемента можно взять свойство id

el.id

И, так как, судя по всему, элемент должен быть один, лучше воспользоваться функцией querySelector, однако тут придется экранировать скобки.

Пример:

function showMessage(el) { 
  var val = document.querySelector( 
    '.' + el.id.replace(/(\[|\])/g, "\\$1")).value; 
  console.log(val); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="id[1]" type="text" onclick="showMessage(this)"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text" onclick="showMessage(this)"> 
<input class="id[2]" type="hidden" value="35">

Можно также оставить использование document.getElementsByClassName однако в этом случае придется выбирать конкретный элемент из коллекции:

function showMessage(el) { 
  var val = document.getElementsByClassName(el.id)[0].value; 
  console.log(val); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="id[1]" type="text" onclick="showMessage(this)"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text" onclick="showMessage(this)"> 
<input class="id[2]" type="hidden" value="35">

Answer 5

function showMessage(className) { 
  var id = document.getElementsByClassName(className)[0].value; 
  alert(id); 
}

<input id="id[1]" type="text" onclick="showMessage('id[2]')"> 
<input class="id[1]" type="hidden" value="25"> 
<input id=id[2] type="text" onclick="showMessage('id[1]')"> 
<input class="id[2]" type="hidden" value="35">