如何在点击时获取输入值

Question

如何获取input标签onclick图片的值和input标签的所有值都不一样？

<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>

Answer 1

首先，您不能多次使用 and Id。您使用了 Id "getHeart" 四次。其次，要获取特定字段的值，您可以执行以下操作：

$("#idOfYourElement").click(function(){
        return this.value;
    })

Answer 2

您可以像下面那样做，使用 onClick 事件和任何 image 的 onClick 找到该特定图像的 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>

Answer 3

到目前为止我看到的答案，假设你想使用jQuery。如果您想使用 Vanilla JavaScript，您可以这样做：

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

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

另外：

确保 class 中的 HTML 以引号结尾。不关闭这些会导致问题。示例：class='wishlist_icon 需要是 class='wishlist_icon'
确保为每个 HTML 元素使用不同的 ID。

Answer 4

修复 html 脚本以在 class 标记后关闭逗号后：

（示例）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')会给你id。

如何在点击时获取输入值

How to get value of input on click

html

javascript

jquery

web-frontend

web