Question

我在编码中遗失了某些地方。我在jquery中真的很新。我有一个span，在我的span中包含img和font。我希望当用户鼠标悬停和mouseout图像和字体更改时。

这是我的HTML，我必须将<?php echo $tododetail_id; ?>放在我的span id中，因为这是循环过程

<span style='float:right;cursor:pointer;' id='delete<?php echo $tododetail_id; ?>'>
    <img id='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;
    <font id='fontdel' style='text-decoration:underline;' color='#BDBDBD'>
    <?php echo lang['DETAIL_REMOVE_CMT_B']; ?></font>
</span>

这是我的jquery

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $("#imgdel").attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).attr('src', '/images/reply_icon_disabled.png');      
    });
});

请帮帮我。

Answer 1

我看到一个问题（除了使用字体标记，这应该用css完成），id应该是唯一的。如果循环此代码，您将有多个id为“imgdel”的img标记。 Afaik jQuery不会返回选择器$（'＃imgdel'）的列表，但只返回第一个匹配的列表。所以我会尝试将php部分更改为

<img class='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;

然后做

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon_disabled.png');      
    });
});

希望有所帮助

Answer 2

如果你在页面上反复出现这样的跨度，那么你的html是无效的，因为img和font元素不会有唯一的id，然后当你尝试用$("#imgdel")选择一个img时，它会在你的JS中只找到第一个（在大多数浏览器中），而不是你在上面徘徊的那个。

您需要选择元素，使其与悬停的特定范围相关联。在您的悬停处理程序中this将引用相关范围，因此您可以使用.find() method来获取该特定范围包含的img：

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $(this).find("img").attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).find("img").attr('src', '/images/reply_icon_disabled.png');      
    });
});

如果这样做，您可以从img和font元素中删除id属性。

“我希望用户鼠标悬停和鼠标移除图像和字体更改。”

您实际上并未说出要更改字体的操作，但您可以使用与上述相同的技术来选择字体元素，即$(this).find("font")。（你为什么要使用字体元素？那是所以 20世纪90年代......）

另请注意，如果为span元素分配了一个公共类而不是内联style="..."属性，则代码会更整洁（如果需要，可以保留id属性），如下所示：

<span class="superSpan" id='delete<?php echo $tododetail_id; ?>'>

然后将其添加到您的样式表中：

span.superSpan { float:right;cursor:pointer; }

...并将您的JS更改为：

$("span.superSpan").hover(...

Answer 3

使用

 $('#imgdel').attr('src', '/images/reply_icon_disabled.png');

而不是

 $(this).attr('src', '/images/reply_icon_disabled.png');

demo

Answer 4

尝试

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $('#imgdel').attr('src', '/images/reply_icon.png');
    }, function() {
        $('#imgdel').attr('src', '/images/reply_icon_disabled.png');      
    });
});

Answer 5

如果这是硬编码图像和字体样式。您可以使用CSS处理此问题。否则与jQuery的倍数你需要尝试不同的方法

Onmouseover使用jquery更改图片和字体颜色

5 个答案: