Poinformuj mnie, dlaczego to nie działa! (Podstawowy jQuery)

Question

Script

function myfn(){ 
    var id= jQuery(this).find('input').val(); 
    alert(id); 
    } 

HTML

<div> 
    <img src=".." onclick="myfn()" > 
    <input type=hidden value=1 > 
</div> 

Funkcja ta jest właściwa, ale wartość id pokazuje niezdefiniowany. Zawarłem wszystkie niezbędne apisy.

Answer 1

Musisz przekazać źródło zdarzenia, używając tego do myfn, również potrzebujesz następnego zamiast find, ponieważ find będzie szukać potomków, a następnie będzie wyglądać na rodzeństwo.

Live Demo

JavaScript

function myfn(obj){ 
    var id= jQuery(obj).next('input').val(); 
    alert(id); 
    } 

w HTML

<div> 
    <img src=".." onclick="myfn(this)" > 
    <input type="hidden" value="1" > 
</div> 

Jako dodatkowej

• Zamknij znaczniki input i img za pomocą /
• Dołącz wartości atrybutów do podwójnych cudzysłowów, np. type i value.

Możesz powiązać zdarzenie za pomocą jQuery, a nie wbudowanego powiązania zdarzeń, które masz. Proponuję użyć klasy do wiązania zdarzenia, do tego musisz przypisać klasę do img. Spowoduje to udostępnienie tego i $ (this) w module obsługi.

Live Demo

Html

<img src=".." onclick="myfn(this)" class="my-class"> 

Javacript/jQuery

$('.my-class').click(function() { 
    var id = jQuery(this).next('input').val(); 
    alert(id); 
}) 

Answer 2

Innym rozwiązaniem byłoby:

HTML:

<div> 
    <img src="http://placehold.it/120x120&text=image1" id="myimg" /> 
    <input type="hidden" value="1" /> 
</div> 

JS:

$('#myimg').click(function myfn(){ 
    var id= jQuery(this).next('input').val(); 
    alert(id); 
}); 

Live Demo

$('#myimg').click(function myfn() { 
 
    var id = jQuery(this).next('input').val(); 
 
    alert(id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="http://placehold.it/120x120&text=image1" id="myimg" /> 
 
    <input type="hidden" value="1" /> 
 
</div>

Answer 3

Ponieważ szukasz elementu wejściowego w img. Musisz szukać tego elementu wejściowego w div jednostki nadrzędnej lub w następnym elemencie.

Spróbuj

function myfn(){ 
    var id= jQuery(this).closest('div').find('input').val(); 
    alert(id); 
    }