Question

我试图根据您点击的按钮提醒输入框中的当前值。因此，如果选择第一个grid-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

使用.prev()功能向上移动兄弟姐妹

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

Answer 2

到目前为止，我不是任何列出的答案的粉丝，它们都与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);
});

我还建议您阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton (Engineer at Google)。

Answer 3

使用jQuery的.siblings()，您可以将元素的兄弟姐妹作为选择器，并指定兄弟应该具有的类或ID。然后，只需要获得兄弟姐妹的价值并提醒它。

$(".remove-photo").on("click", function(){
    var inputValue = $(this).siblings(".photo1").val();
    alert(inputValue);
});

Answer 4

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

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

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

4 个答案: