Firefox浏览器:Filter过滤选择器无法触发绑定事件

程序员文章站 2022-04-18 22:05:49

...

问题:在firefox浏览器环境下,事件css("background-color","red")被bt1按钮绑定后,按下按钮无法触发绑定的事件css("background-color","red"),同等条件下chrome浏览器可以触发.
不能执行的代码:Filter过滤选择器所绑定的事件均不能很好的执行.

<script>
        $(function () {
            $("#bt1").click(function () {
                $("div:first").css("background-color","red");
            })
            $("#bt2").click(function () {
                $("div:last").css("background-color","red");
            })
            $("#bt3").click(function () {
                $("div:even").css("background-color","red");
            })
            $("#bt4").click(function () {
                $("div:odd").css("background-color","red");
            })
            $("#bt5").click(function(){
                $("div:not(.mini)").css("background-color","red");
            })
            $("#bt6").click(function () {
                $("div:eq(3)").css("background-color", "red");
                })
            $("#bt7").click(function () {
                $("div:gt(3)").css("background-color","red");
                })
            $("#bt8").click(function () {
                $("div:lt(3)").css("background-color","red");
            })
        })

    </script>

代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $("#bt1").click(function () {
                $("div:first").css("background-color","red");
            })
            $("#bt2").click(function () {
                $("div:last").css("background-color","red");
            })
            $("#bt3").click(function () {
                $("div:even").css("background-color","red");
            })
            $("#bt4").click(function () {
                $("div:odd").css("background-color","red");
            })
        })
    </script>
</head>
<body>
        <div id="one"> <!--0-->
            <div class="mini">11111</div> <!--1-->
        </div>
        <div id="two"> <!--2-->
            <div class="mini">22222</div> <!--3-->
            <div class="mini">33333</div> <!--4-->
        </div>
        <div id="three">
            <div class="mini">44444</div>
            <div class="mini">55555</div>
            <div class="mini">66666</div>
        </div>

        <span id="four"></span>

        <input type="button" value="让第一个div元素背景红色" id="bt1" />
        <input type="button" value="让最后一个div元素背景红色" id="bt2" />
        <input type="button" value="让偶数div元素背景红色" id="bt3" />
        <input type="button" value="让奇数div元素背景红色" id="bt4" />
        <input type="button" value="让class不为mini的div元素背景红色" id="bt5" />
        <input type="button" value="让索引值是3的div元素背景红色" id="bt6" />
        <input type="button" value="让索引值大于3的div元素背景红色" id="bt7" />
        <input type="button" value="让索引值小于3的div元素背景红色" id="bt8" />
</body>
</html>

相关标签：软件环境问题 jquery

上一篇： Unknown encoder 'libx264'的解决方法

下一篇： Flutter 是怎样练成的