Question

我想在用户点击jquery中的img时获得最接近的输入值，我该怎么做？例如，如果用户单击img a，它将获得值'1'。

<img src="">a</img>
<input type="hidden" value="1" />
<img src="">b</img>
<input type="hidden" value="2" />
<img src="">c</img>
<input type="hidden" value="3" />
<img src="">d</img>
<input type="hidden" value="4" />
<img src="">e</img>

Answer 1

使用 next()

＆＃13;

$('img').click(function() {
  var value = $(this).next().val();
  alert(value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src="" alt=a />
<input type="hidden" value="1" />
<img src="" alt=b />
<input type="hidden" value="2" />
<img src="" alt=c />
<input type="hidden" class=a value="3" />
<img src="" alt=d />
<input type="hidden" value="4" />
<img src="" alt=e />

＆＃13;

更新：如果输入后有任何其他元素，则需要使用 nextAll() 和 first()

＆＃13;

$('img').click(function() {
  var value = $(this).nextAll('input').first().val();
  // you can avoid first(), since val() return value of first element from selector
  // var value = $(this).nextAll('input').val();
  alert(value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src="" alt=a />
<input type="hidden" value="1" />
<span>hello</span>
<img src="" alt=b />
<input type="hidden" value="2" />
<span>hello</span>
<img src="" alt=c />
<input type="hidden" value="3" />
<span>hello</span>
<img src="" alt=d />
<input type="hidden" value="4" />
<img src="" alt=e />

＆＃13;

Answer 2

试试这个

$('img').click(function() {
  var value = $(this).next().val();
});

Answer 3

$("img").click(function(){
   alert($(this).parents('.input-group').find('input').val());
});

希望这会对你有所帮助!!

Answer 4

我猜你的页面中会有除此之外的img标签。在这种情况下，如果你可以用div包围这些img标签并做下面的事情会更好。

<div id="parentDiv">
    <img src="">a</img>
    <input type="hidden" value="1" />
    <img src="">b</img>
    <input type="hidden" value="2" />
    <img src="">c</img>
    <input type="hidden" value="3" />
    <img src="">d</img>
    <input type="hidden" value="4" />
    <img src="">e</img>
</div>

和你应该放的jquery，

$("#parentDiv img").each(function(){

    $(this).click(function(){

        if($(this).next().val()){

            alert($(this).next().val());
        }
    });
});

如果您的网页没有除此之外的任何其他img标记，只需保持html原样并放置此代码的和平

$("img").click(function(){

    if($(this).next().val()){

        alert($(this).next().val());
    }
});

如何获得img jquery旁边最接近的输入值？

4 个答案: