javascript - 从 Div 获取图像文件名并在按钮悬停时复制到文本字段中

Question

在 ID 为 #prlogo 的 div 中，我有图像。当我将鼠标悬停在 ID 为 #button 的按钮上时，我需要将服务器上图像的文件名或位置复制到 ID 为 #input_2_16 的文本文件中。

听起来很简单，但我一直在努力做到这一点......

div html：

<div id="prlogo" class="prlogo"><img class="logoplace" src="../preview/logo-place.png"/>
        </div>

米罗

Answer 1

没有更多上下文并使用 jQuery。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() { //this anonymous function will run when the page is ready
    $("#button").hover(function() {
      //mouse enter
      var imgSrc = $("#prlogo img").attr("src"); 
      //assumes there is an <img /> tag as a child of the #prlogo div
      $("#input_2_16").val(imgSrc);
    },function() {
      //mouse leave
    });
});
</script>

如果您不想在鼠标离开时做任何事情，您可以改为

$("#button").mouseenter(function() {
  //mouse enter
  var imgSrc = $("#prlogo img").attr("src"); 
  //assumes there is an <img /> tag as a child of the #prlogo div
  $("#input_2_16").val(imgSrc);
});

Answer 2

如果我没看错的话，应该是这样的：

$( function () {
    $( '#button' ).mouseover( function () {
        var src = $( '#prlogo img' ).attr( 'src' );
        $( '#input_2_16' ).val( src );
    } );
} );
​

Answer 3

如果您需要在 DOM 中向下移动不止一层，请使用 .find 代替 .children。

$('#button').on('hover', function(){
        $('#input_2_16').val($('#prlogo').children('img').attr('src'));
});