0

我在编码的某个地方迷失了方向。我真的是 jquery 的新手。我有一个跨度，在我的跨度中包含 img 和字体。我想要当用户鼠标悬停和鼠标悬停时图像和字体发生变化。

这是我的 HTML，我必须<?php echo $tododetail_id; ?>输入我的跨度 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');      
    });
});

请帮我。

4

5 回答 5

2

我看到一个问题（除了使用字体标签，这应该用 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');      
    });
});

希望能帮助到你

于 2013-10-04T09:45:17.433 回答
1

如果您在页面上有重复的跨度，那么您的 html 是无效的，因为 img 和 font 元素将没有唯一的 id，然后在您的 JS 中，当您尝试使用它选择一个 img 时$("#imgdel")，只会找到第一个（在大多数情况下）浏览器），而不是您悬停的那个。

相反，您需要以将元素与悬停的特定跨度相关联的方式选择元素。在您的悬停处理程序this中将引用有问题的跨度，因此您可以使用该.find()方法获取该特定跨度包含的 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"). （你为什么要使用字体元素？那是1990年代......）

另请注意，如果您为 span 元素分配一个公共类而不是 inlinestyle="..."属性（如果需要其他内容，您可以保留 id 属性），您的代码会更整洁，这样说：

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

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

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

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

$("span.superSpan").hover(...
于 2013-10-04T09:37:29.840 回答
1

利用

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

代替

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

演示

于 2013-10-04T09:42:03.950 回答
0

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

于 2013-10-04T09:41:48.330 回答
0

试试喜欢

$(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');      
    });
});
于 2013-10-04T09:33:49.993 回答