Question

当我使用jQuery将鼠标悬停在它上面时，我试图在bootstrap 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相当新，所以如果我有任何不准确之处，请指出它们。

Answer 1

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

Answer 2

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

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

Answer 3

正如@Sukhmeet Singh指出的那样，popover直到点击才出现，而不是出现在文件上。

所以我调整了我的脚本：

        $(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');
                });
            });
        });

它有效。在document.ready中不存在popover，但是当我点击具有属性[data-toggle="popover"]的按钮时出现，因此，当我按下我要突出显示的按钮时，它会执行此操作。

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

3 个答案: