Как получить значение ввода по клику - PullRequest
Новая
       40

Как получить значение ввода по клику

0 голосов
/ 02 июля 2019

Как получить значение входного тега на изображении клика и все значения входного тега различны? 

<div>
  <input type="text" value="1" style="display:" id="getHeart">
  <img src='images/heart.png' id='wishlistRent1' class='wishlist_icon>
</div>

<div>
  <input type="text" value="2" style="display:" id="getHeart">
  <img src='images/heart.png' id='wishlistRent1' class='wishlist_icon>
</div>

<div>
  <input type="text" value="3" style="display:" id="getHeart">
  <img src='images/heart.png' id='wishlistRent1' class='wishlist_icon>
</div>

<div>
  <input type="text" value="4" style="display:" id="getHeart">
  <img src='images/heart.png' id='wishlistRent1' class='wishlist_icon>
</div>

Ответы [ 4 ]

1 голос
/ 02 июля 2019

Вы можете сделать, как показано ниже, использовать onClick событие и onClick любого image найти input значение этого конкретного изображения: 

$("img").click(function(){
       console.log($(this).parent().find('input').val());
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <input type="text" value="1" style="display:" id="getHeart">
  <img src="images/heart.png" id="wishlistRent1" class="wishlist_icon">
</div>

<div>
  <input type="text" value="2" style="display:" id="getHeart">
  <img src="images/heart.png" id=
"wishlistRent1" class="wishlist_icon">
</div>

<div>
  <input type="text" value="3" style="display:" id="getHeart">
  <img src="images/heart.png" id="wishlistRent1" class="wishlist_icon">
</div>

<div>
  <input type="text" value="4" style="display:" id="getHeart">
  <img src="images/heart.png" id="wishlistRent1" class="wishlist_icon">
</div>
1 голос
/ 02 июля 2019

Во-первых, вы не можете использовать и идентификатор более одного раза. Вы используете идентификатор "getHeart" четыре раза. Во-вторых, чтобы получить значение определенного поля, вы можете сделать что-то вроде: 

$("#idOfYourElement").click(function(){
        return this.value;
    })
0 голосов
/ 02 июля 2019

Как только вы исправите свой HTML-скрипт для закрытия запятой после тега класса:

(пример) class='wishlist_icon> до class='wishlist_icon'>, вы можете сделать следующее, чтобы проверить свои значения: 

$(document).ready(function() {
    var selectedInput = '';
    $('img').click(function() {
        selectedInput = $(this).parent().find('input');
        alert('Value of selected input = ' + selectedInput.val());
    });
});

Аналогичным образом selectedInput.attr('yourInputBoxPropertyHere') можно использовать для получения соответствующего значения, например: selectedInput.attr('id') даст вам идентификатор.

0 голосов
/ 02 июля 2019

Ответы, которые я видел до сих пор, предполагают, что вы хотите использовать jQuery. Если вы хотите использовать Vanilla JavaScript, вы можете сделать это следующим образом: 

var heartImage = document.getElementById( 'wishlistRent1' );

heartImage.onclick = function() {
  console.log( 'Value: ', document.getElementById('getHeart1').value );
};

Также:

  • Убедитесь, что ваши уроки в HTML заканчиваются кавычками. Не закрывается эти причины проблемы. Пример: class = 'wishlist_icon должно быть class =' ​​wishlist_icon '
  • Убедитесь, что вы используете разные идентификаторы для каждого элемента HTML.
...