为什么jQuery悬停方法在这种情况下不起作用

Why is the jQuery hover method not working in this case?

本文关键字：这种情况下 不起作用 方法 jQuery 悬停 为什么      更新时间：2023-09-26

当我使用jQuery将鼠标悬停在引导程序popover上时，我正试图在它中获得一个按钮来更改类，但由于某种原因，它不起作用。我到处都找过了，我在jQuery中对悬停事件使用了和其他人相同的方法，但由于某种原因，它不起作用。

我正试图在悬停时将类从btn btn-default更改为btn btn-success。我意识到这可以使用CSS（颜色变化）来实现，但这应该是有效的，但它不起作用，我想知道为什么并解决它。

我使用的是：Bootstrap 3.3.6，jQuery

整个HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>Easy ToDo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script> -->
    <script>
        function checkTaskStatus(checkbox) {
            var tasktext = document.getElementById('tasktext');
            var taskrow = document.getElementById('taskrow');
            if (checkbox.checked){
                taskrow.className = "active";
                tasktext.className = "text-muted";
                tasktext.style.textDecoration = "line-through";
            }
            else {
                document.getElementById("taskrow").className = "warning";
                document.getElementById('tasktext').className = "text-success";
                tasktext.style.textDecoration = "none";
            }
        }
        function changeBtn(button) {
            var temp = button.className;
            if(temp === "btn btn-primary") {
                button.className = "btn btn-danger";
                button.innerText = "Close";
            }
            else {
                button.className = "btn btn-primary";
                button.innerText = "Add New Task";
            }
        }

    </script>
    <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover({
                html: true,
                title: 'New Task',
                trigger: 'click',
                content: function () {
                            return $('.popoverContent').html();
                },
                placement: 'right'
            });

        });
    </script>
    <script>
        $(document).ready(function () {
            $("#btntask").hover(function () {
                $(this).removeClass('btn btn-default');
                $(this).addClass('btn btn-success');
            }, function () {
                $(this).removeClass('btn btn-success');
                $(this).addClass('btn btn-default');
            });
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <h1 style="border: 2px solid rebeccapurple; margin-top: 0; background-color: rebeccapurple; color: white; padding-left: 0.6em; padding-bottom: 0.1em; margin-bottom: 1.5em;">An Easy To - Do Web App!</h1>

       <button type="button" class="btn btn-primary" style="margin-bottom: 15px; margin-left: 10px;" data-toggle="popover" onclick="changeBtn(this)">Add New Task</button>
        <div class="popoverContent hide">
            <label for="newTask">Task:</label>
            <textarea rows="3" name="newTask" class="form-control input-lg" placeholder="Task HTML"></textarea>
            <button class="btn btn-default" type="submit" style="margin-top: 10px;" id="btntask">Done</button>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: auto"> </th>
                    <th style="width: auto">#</th>
                    <th style="width: auto">Date</th>
                    <th style="width: auto">Task</th>
                    <th style="width: auto">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning" id="taskrow">
                    <td><div class="checkbox"><label><input type="checkbox" onclick="checkTaskStatus(this)"></label></div></td>
                    <td scope="row" style="font-weight: bold;">1</td>
                    <td><p style="font-style: italic; font-weight: bold;">7th May, 2016</p></td>
                    <td class="text-success" id="tasktext" style="text-decoration: none;"><h5 id="task-heading" style="margin-top: 0; text-decoration: underline; font-weight: bold;">Tesla Share Purchase Reasearch:</h5>
                        <ul>
                            <li>Find out how an Australian citizen can purchase shares in an American company (e.g. Tesla) which is not listed on the ASX (Australian Stock Exchange)</li>
                            <li>Prepare a brief list of the steps, costs and general time frame for an Australian to get set up to purchase share in American companies</li>
                            <li>Please also state the current stock price of Apple, Google (potentially Alphabet as they are the parent??), Facebook, Twitter and Tesla</li>
                            <li>Bullet points are fine</li>
                            <li>Please include any relevant links</li>
                            <li>Spend no longer than 1.5 – 2 hours on this</li>
                        </ul>
                    </td>
                    <td><div class="form-group">
                            <textarea class="form-control input-md" rows="4" placeholder="Notes"></textarea>
                            <button class="btn btn-default btn-block" type="submit" style="margin-top: 10px;">Save</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>
</body>
</html>

请注意，我是jQuery和JS的新手，所以如果我有任何不准确的地方，请指出。

问题是，当您试图在popover上添加悬停状态时，popover元素还不可用。只有在单击时才会添加该元素。因此，$(document).ready()中的函数实际上没有添加悬停状态。而是使用jQuery .on

如果你的悬停没有太多工作要做，你可以选择css悬停

#element:hover
{
    /*Add your css after hover here*/
}

正如@Sukhmete Singh所指出的，popover直到点击时才出现，而不是在document.ready.上

所以我调整了我的脚本：

        $(document).ready(function () {
            $("#btntask").hover(function () {
                $(this).removeClass('btn btn-default');
                $(this).addClass('btn btn-success');
            }, function () {
                $(this).removeClass('btn btn-success');
                $(this).addClass('btn btn-default');
            });
        });

收件人：

$(document).ready(function () {
            $('[data-toggle="popover"]').on('click', function () {
                $("#btntask").hover(function () {
                    $(this).removeClass('btn btn-default');
                    $(this).addClass('btn btn-success');
                }, function () {
                    $(this).removeClass('btn btn-success');
                    $(this).addClass('btn btn-default');
                });
            });
        });

它奏效了。popover在document.ready中不存在，但当我单击属性为[data-toggle="popover"]的按钮时会出现在那里，因此，当我瞄准要高亮显示的按钮时，它会显示出来。

相关文章：