JQuery Wählen Sie eine von mehreren img in div

Ich bin neu bei JQuery und steckte auf ein einfaches Problem. Ich wollte das Markup unten nehmen und ein Skript erstellen, das eine größere Version der Maus über Img (eine der fünf von div) in p, "big" legt. Der Eintrag in "big" entspricht dem letzten mouseover-Ziel und fungiert als Link - genau wie die kleinere Version.JQuery Wählen Sie eine von mehreren img in div

<!doctype html> 
    <html> 
     <head> 
      <meta charset = "UTF-8"/> 
      <title>Image Links</title> 
     </head> 
     <body> 
      <p id = "big"> 

      </p> 
      <div id = "links"> 
       <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();"> 
       <a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100"> 
       <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> 
       <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> 
       <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> 
      </div> 
      <script src="jquery-3.1.0.js"></script> 
      <script src = "Test 3.js"></script> 

     </body> 
    </html>

Dies ist js Skript, das ich versucht habe> < zu verwenden. Der nächste Erfolg ist, dass [object Object] mehrmals angezeigt wird (anstelle des beabsichtigten größeren Bildes).

//intended to increase the size of imgs in div, and place the larger image at the top of the document 

var enlargeCopy = function() { 

    var x = $(".links").children("img").css("width", "*=2"); 
    var x = $(".links").children("img").css("height", "*=2"); 

    document.getElementById("big").appendChild(document.createTextNode(x)); 
};

Was ich versucht bin zu tun- erklärt prägnanter:

-1. ist, über irgendeinen der fünf Bildanker zu schweben (in div des HTML-Dokuments)

-2. Damit das Bild, das gerade angezeigt wird, oben auf der Seite als Kopie erscheint (im derzeit leeren p-Steckplatz)

-3. damit diese Kopie doppelt so breit und doppelt so lang ist wie der Mauszeiger über dem Ziel

-4. Damit die Kopie immer noch als Link funktioniert

Quelle

2016-07-29 user3734311

Und Ihre Frage ist ...? – Ionut

$ (". Links"). Children() gibt die unmittelbaren Kindelemente zurück, in Ihrem Fall Elemente. – jcruz

Ich werde herausfinden, wie man es umformuliert - aber ich musste das Bild, das über den oberen Teil des Dokuments maused ist, kopieren. Das kopierte Bild muss immer noch die Eigenschaften eines verankerten Links beibehalten und muss doppelt so lang und breit sein. – user3734311

Wenn ich Sie richtig verstanden habe, möchten Sie das Bild klonen und an ein Element bei Mouseover anhängen, oder? Vielleicht können Sie jQuery-Klon-Methode verwenden:

$('#links a').on('mouseover', function(){ 
 
    $(this).clone().appendTo('#big'); 
 
    var originalWidth = $(this).find('img').width(); 
 
    var originalHeight = $(this).find('img').height(); 
 
    $('#big, #big img').css({'width': originalWidth * 2 + 'px', 'height': originalHeight * 2 + 'px'}); 
 
});

Außerdem sollten Sie Ihre Anker-Tags wie diese </a> schließen.

Ich habe dir auch eine FIDDLE gemacht. Diese

Quelle

2016-07-29 12:26:27 Ionut

Nicht ganz. Es durch den Debugger laufen und nichts bekommen. Kann es auch nicht funktionieren.Ich gehe davon aus, dass es immer noch notwendig ist, die "onmouseover" -Eigenschaft auf dem a href-Objekt zu belassen, oder? – user3734311

Ja. Entfernen Sie den onmouseover und schließen Sie die jQuery-Bibliothek mit ein, und es wird funktionieren. Ich denke, das ist eine sauberere und bessere Lösung. – Ionut

Sehr geschätzt, es funktioniert wie ein Zauber - nur alte Mouse-Overs mit neuen überschrieben werden müssen - aber das scheint nicht zu schwierig. Danke eine Million: D – user3734311

ist, was ich tun würde:

-First gleichen Namen der fünf <a> fügen Sie verwenden wollen. Zum Beispiel:

<a name="exampleLink" href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" >

-Dann einen evenlistener zu diesem Namen:

$(document).ready(function() { 
    $('a[name=exampleLink]').mouseover(function() { 
     $(this).clone().appendTo($('#big').empty()); 
    }); 
});

jetzt nur Sie das img tun müssen, größte, wie Sie sagen, aber ich havn't Zeit enougth, sicher kann jemand bearbeiten !

Quelle

2016-07-29 12:38:37 Mikel

<p> 
    <img src="" id="big" style="display: none;"> <!-- empty hidden image --> 
</p> 
<div id="links"> 
    <a href="http://google.com"> 
    <img border="0" alt="1" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" width="100" height="150" /> 
    </a> 
    <a href="http://google.com"> 
    <img border="0" alt="2" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" width="200" height="100" /> 
    </a> 
    <a href="http://google.com"> 
    <img border="0" alt="3" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" width="100" height="100" /> 
    </a> 
    <a href="http://google.com"> 
    <img border="0" alt="4" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/jq-global-nav.png" width="100" height="100" /> 
    </a> 
</div> 


    $('#links a').mouseover(function(){ 
    var $el = $(this).children('img'); 
    $('#big') 
     .attr('src', $el.attr('src')) 
     .width($el[0].naturalWidth * 2) 
     .height($el[0].naturalHeight * 2) 
     .show(); 
    });

Quelle

2016-07-29 12:47:07

müssen Sie Ihre Wähler auf $("#links") statt $(".links") Ihre modifizierte Funktion wird wie folgt geändert werden.
var enlargeCopy = function() { var x = $("#links").children("img").css("width", "*=2"); var x = $("#links").children("img").css("height", "*=2"); document.getElementById("big").appendChild(document.createTextNode(x)); };

Quelle

2016-07-29 12:47:33

JQuery Wählen Sie eine von mehreren img in div

Antwort

Verwandte Themen