Question

如何获取onclick图片中输入标签的值并且输入标签的所有值都不相同？

<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

首先，您不能多次使用和ID。您正在使用ID“ getHeart”四次。其次，要获取特定字段的值，您可以执行以下操作：

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

Answer 2

您可以像下面这样操作，使用onClick事件和任何onClick的{{1}}找到特定图像的image值：

input

$("img").click(function(){
       console.log($(this).parent().find('input').val());
    })

Answer 3

到目前为止，我所看到的答案都假定您要使用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元素使用不同的ID。

Answer 4

一旦修复了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')将为您提供ID。

如何获得点击价值

4 个答案: