获取具有相同类名的当前输入值。

Question

我试图通知输入框中的当前值，这取决于您单击哪个按钮。因此，如果选择了第一个网格-2按钮，它将警告1，如果要单击输入值为2的第二个按钮，则将警告该编号等。

<div class='grid-2'>
    <input class="photo1" value="1">
    <a class='remove-photo' href='#'>Remove Now</a>
</div>

<div class='grid-2'>
    <input class="photo1" value="2">
    <a class='remove-photo' href='#'>Remove Now</a>
</div>


<div class='grid-2'>
    <input class="photo1" value="3">
    <a class='remove-photo' href='#'>Remove Now</a>
</div>


<div class='grid-2'>
    <input class="photo1" value="4">
    <a class='remove-photo' href='#'>Remove Now</a>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $(".remove-photo").click(function() {
        var current_selected_photo_num = $(".photo1").val();
        alert(current_selected_photo_num);
    });
}); 
</script>

Answer 1

您可以定位周围的div并在其中找到input：

$(".remove-photo").click(function() {
    var num = $(this).closest('div').find(".photo1").val();
    alert(num);
});

Answer 2

使用.prev()函数向上遍历兄弟姐妹

$(".remove-photo").click(function() { 
    var current_selected_photo_num = 
    $(this).prev('.photo1').val(); 
    alert(current_selected_photo_num); 
})

Answer 3

到目前为止，我不喜欢任何列出的答案，它们都与html紧密相连，这使得您的javascript很脆弱。一个简单的HTML更改可能会阻止大多数其他答案像预期的那样工作。

相反，我建议更改您的HTML：

<input class="photo1" value="1" id="photo-1-1">
<a class='remove-photo js-remove-photo' href='#' data-alert-target="#photo-1-1">Remove Now</a>

<input class="photo1" value="1" id="photo-1-2">
<a class='remove-photo js-remove-photo' href='#' data-alert-target="#photo-1-2">Remove Now</a>

<input class="photo1" value="1" id="photo-1-3">
<a class='remove-photo js-remove-photo' href='#' data-alert-target="#photo-1-3">Remove Now</a>

<input class="photo1" value="1" id="photo-1-4">
<a class='remove-photo js-remove-photo' href='#' data-alert-target="#photo-1-4">Remove Now</a>

Javascript

$(".js-remove-photo").click(function() {
  var target = $(this).data('alert-target');
  var value = $(target).val();
  alert(value);
});

我还建议阅读脱钩你的HTML，CSS和JavaScript -菲利普沃尔顿(工程师在谷歌)。