Question

我有一个包含类'remove-project'的链接，我想默认隐藏它，并在div悬停时设置为可见。到目前为止，我有这个（这不起作用）

$('.project-container').hover(function() {
    $(.remove-project).show();
},
function() {
    $(.remove-project).hide();
});


<?php
    foreach($user['Project'] as $project)
    {
        echo '<div class=project-container>';
        echo $html->link($project['title'], array('controller' => 'projects', 'action' => 'view', $project['slug'])).' <small>Posted '.$time->niceShort($project['created']).'&nbsp;</small><a href=
        class=remove-project>Delete</a>';
        echo '<br />';
        echo strip_tags($text->truncate(
                $project['description'], 
                400,
                array(
                    'ending' => '...', 
                    'exact' => false,
                                            'html' => false
                )));

        echo '<br /><br />';
        echo '<b>Tags</b>: '.$project['tags'];
        echo '</div>';
        echo '<br /><br />';

    }
?>

我认为我错了

$(.remove-project).show();

能帮帮我吗？

Answer 1

我认为你需要这样做：

$('.remove-project').show();

（AKA，使用引号正确执行选择）。当然，这是假设该组件已经在您的HTML中并且是隐藏的。

更新：为了确保div标签已经在您的HTML中并默认隐藏，您可以执行以下操作：

<div class="remove-project" style="display:none;">

当然，建议您不要直接嵌入样式，而是将一个类应用于div。但是......这会奏效。

Answer 2

你需要选择器周围的引号：

$('.remove-project').show();

Answer 3

正如其他人所说，你需要引用你的选择器。

此外，您可以使用jQuery's .toggle() method：

稍微简化您的代码

$('.project-container').hover(function( e ) {
    $('.remove-project').toggle( e.type === 'mouseenter' );
});

mouseenter和mouseleave会触发单一功能，切换时会显示e.type === "mouseenter"，否则会隐藏。

Answer 4

您的选择器需要引号。如果你使用Firefox安装Firebug。它有一个很好的调试控制台。 javascript错误应该在控制台中打印出您拥有的代码。你也应该在html中引用属性。 最后因为他们是'remove-project'类的多个链接，你需要指定你的jquery选择器的上下文。这是新的代码

$('.project-container').hover(function() {
    $('.remove-project', this).show();
},
function() {
    $('.remove-project', this).hide();
});


<?php
    foreach($user['Project'] as $project)
    {
        echo '<div class="project-container">';
        echo $html->link($project['title'], array('controller' => 'projects', 'action' => 'view', $project['slug'])).' <small>Posted '.$time->niceShort($project['created']).'&nbsp;</small><a href=
        class=remove-project>Delete</a>';
        echo '<br />';
        echo strip_tags($text->truncate(
                $project['description'], 
                400,
                array(
                    'ending' => '...', 
                    'exact' => false,
                                            'html' => false
                )));

        echo '<br /><br />';
        echo '<b>Tags</b>: '.$project['tags'];
        echo '</div>';
        echo '<br /><br />';

    }
?>

Answer 5

我不会使用show和hide方法，因为它们有点慢（特别是如果你在页面上使用了很多动画）。相反，我会使用子选择器，因此您只使用该<div>的链接并添加/删除一组“隐藏”，将显示属性设置为none。

所以......

$('.project-container').mouseenter(function() {
    $('.remove-project', this).removeClass('hidden');
}).mouseleave(function() {
    $('.remove-project', this).addClass('hidden');
});

当鼠标输入<div>时，“隐藏”类将从<div>的链接中删除。当鼠标离开时，它将被重新添加。

jQuery：hover div set link to visible

5 个答案: