Question

我在img标记内有a个标记。如果我将鼠标悬停在标签上，那么我想提醒img标签的src，并删除它的最后4个字符。

HTML：

<a onmouseover="hoverImage($(this))">
    <img src="https://www.google.de/images/srpr/logo11w.png" height="24" alt="" title="" />
    <p>Startseite</p>
</a>

JavaScript的：

function hoverImage (e) {
 alert(e.find('img').getAttribute('src'));
}

我尽我所能但不工作:(

http://jsfiddle.net/opvryy00/

Answer 1

试试这个

HTML

<a >
    <img src="https://www.google.de/images/srpr/logo11w.png" height="24" alt="" title="" />
    <p>Startseite</p>
</a>

JS

$( "a" ).mouseover(function() {
   var src=$(this).find("img").prop('src');
    src=src.slice(0,-4);
    alert(src)
});

jsfiddle

Answer 2

不要使用内联JavaScript：它非常丑陋且过时，因为您可以使用脚本执行所有操作。

删除HTML中的onmouseover="..."属性，在链接中添加ID并使用Javascript收听事件，如下所示：

HTML：

<a id="my-link">
    <img src="https://www.google.de/images/srpr/logo11w.png" height="24" alt="" title="" />
    <p>Startseite</p>
</a>

使用Javascript：

function hoverImage(e) {
    var img = $(e.target).find('img');
    alert(img.getAttribute('src'));

    // Delete the last 4 characters
    img.setAttribute('src', el.getAttribute('src').slice(0, -4));
}

$("#my-link").mouseover(hoverImage);

Answer 3

试试这个：

$('a').mouseover(function(){
    alert($(this).find('img').attr('src').slice(0, -4));
});

Answer 4

在这里试试这段代码。您可以删除标记内的onmouseover属性。

<强> HTML

<a>
  <img src="https://www.google.de/images/srpr/logo11w.png" height="24" alt="" title="" />
  <p>Startseite</p>
</a>

<强> JS

$(function()
{
  $('a').mouseover(function(){
     var str = $(this).find('img').attr('src');             
      var new_str = str.substring(0,str.length - 4);
      alert(new_str);
  });      
});

Answer 5

我建议你稍微调整一下你的方法，让我们删除内联的javascript并直接定位图像。另外，让我们避开警报，您可以看到结果显示在您的锚点下方。

<强> HTML

<a>
    <img src="https://www.google.de/images/srpr/logo11w.png" height="24" alt="" title="" />
    <p>Startseite</p>
</a>
<div class="output"></div>

<强> JS

var hoverImage = function(e) {
    var $img = $(e.currentTarget),
        src = $img.attr('src'),
        newSource;

    newSource = src.substring(0, src.length - 4);

    $('.output').html(newSource);
}

$(document).on('ready', function() {
    $('img').hover(hoverImage);
});

http://jsfiddle.net/_naz/u2f2qeaw/

得到儿童形象的src

5 个答案: