Jquery: Zugriff auf Data-Link-Attribut

Question

Ich möchte Data-Link-Attribut Formular ein Bild klicken.

Es folgt mein Bildtag

<a href="#" class="aclick"> 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
</a> 

es auf Klick zu bekommen das ist, was ich tue,

<script type="text/javascript" language="javascript"> 
     $(".aclick").click(function (e) { 
     e.preventDefault(); 
     alert($(this).attr("data-link")); 
     var link = $(this).data("data-link");// tried both 
     console.log(link); 

    }); 

</script> 

wenn ich versuche, es zu protokollieren oder alarmieren, erhalte ich undefined Bitte helfen Wie kann ich es beheben?

Answer 1

Unten ist Code-Schnipsel, um Ihnen zu helfen. Data-Link-Attribut ist in Img-Tag und nicht in "A" -Tag.

$(".aclick").click(function (e) { 
 
     e.preventDefault(); 
 
     alert($(this).find('img').attr("data-link")); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="aclick"> 
 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
 
</a>

Answer 2

Der Grund, warum Sie keinen Wert erhalten, ist, dass Sie das Data-Link-Attribut des Anchor-Tags erhalten, da dies das darstellt. Wenn Sie das Kindbild finden, erhalten Sie den Datenlink. Hier ist ein fiddle davon funktioniert.

Answer 3

Sie können dies versuchen,

<script type="text/javascript" language="javascript"> 
    $(".aclick").click(function (e) { 
     e.preventDefault(); 
     alert($(this).find('img').attr('data-link')); 
     var link = $(this).find('img').attr('data-link') 
     console.log(link);  
    }); 
</script> 

Answer 4

Im Zusammenhang bezieht sich $(this) auf den Link, nicht das Bild.

Um stattdessen das Bild zu erhalten, verwenden:

var link = $('img', $(this)).data('link'); 

dass das img Element innerhalb des Link bekommt (was $(this) ist).

mehr über die .data() -Methode hier lesen: https://api.jquery.com/data/
Meiner Meinung nach ist es es -Methode ein bisschen sauberer als mit dem .attr() macht.

Answer 5

Sie ordnen Sie Data-Link-Attribut im img-Tag,

so müssen Sie

$(".aclick img").click(function (e) { 
 
     e.preventDefault(); 
 
     alert($(this).data("link")); 
 
     var link = $(this).data("link"); 
 
     console.log(link); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="aclick"> 
 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
 
</a>

Answer 6

Sie Ereignis-Tag klicken schreiben auf das Bild klicken Ereignis auf img sein muss Tag auch.

<script type="text/javascript" language="javascript"> 
     $(".aclick img").click(function (e) { 
     e.preventDefault(); 
     alert($(this).attr("data-link")); 
     var link = $(this).attr("data-link");// tried both 
     console.log(link); 

    }); 

</script> 

Arbeits Fiddle

$(".aclick img").click(function (e) { 
 
     e.preventDefault(); 
 
     alert($(this).attr("data-link")); 
 
     var link = $(this).attr("data-link");// tried both 
 
     console.log(link); 
 

 
    });

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
<a href="#" class="aclick"> 
 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
 
</a>

Answer 7

Img ist das Kind-Element von a .so mit $(this).children('img') versuchen.Und Gebrauch verwendet, um mit data('link') statt data('data-link')

$(".aclick").click(function(e) { 
 
    e.preventDefault(); 
 
    alert($(this).children('img').attr("data-link")); 
 
    var link = $(this).children('img').data("link"); // tried both 
 
    console.log(link); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="aclick"> 
 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
 
</a>

Answer 8

dies bezieht sich auf den Anker-Tag nicht den Image-Tag. Verwendung dieses

$('.aclick img').attr("data-link"); 

Answer 9

Auf (.aclick).click()data-linkundefined zurück, die data-link auf dem Bild ist, erhalten Sie das Bild .find()

Die find() Methode gibt Elemente des ausgewählten Elements mit Nachkomme.

Um den Wert data* Verwendung .data()

Die Daten- * Attribute verwendet, erhalten benutzerdefinierte Daten privat zu der Seite oder Anwendung zu speichern.

.data() Speichern Sie beliebige Daten, die den übereinstimmenden Elementen zugeordnet sind, oder geben Sie den Wert im benannten Datenspeicher für das erste Element in der Gruppe übereinstimmender Elemente zurück.

$(".aclick").click(function (e) { 
 
    e.preventDefault(); 
 
    var link = $(this).find('img').data('link'); 
 
    console.log(link); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="aclick"> 
 
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2"> 
 
</a>