css ul li 操作 prop trigger

最新推荐文章于 2022-03-20 22:35:15 发布

KingCruel

最新推荐文章于 2022-03-20 22:35:15 发布

阅读量323

点赞数

分类专栏： JavaScript 文章标签： css css3 前端

本文链接：https://blog.csdn.net/KingCruel/article/details/120888664

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文通过实例代码介绍了jQuery中trigger()方法触发元素事件及prop()方法设置与获取属性值的操作，包括点击事件处理、元素状态切换及联动效果。示例包括单击li元素改变背景色、联动select选择项以及多条件判断下的事件响应。

摘要由CSDN通过智能技术生成

trigger() 方法：触发被选元素的指定事件类型；
prop() 方法：用于设置或返回当前jQuery对象所匹配的元素的属性值
当该方法用于【返回】属性值时，则返回第一个匹配元素的值

$(selector).prop(property)

当该方法用于【设置】属性值时，则为匹配元素集合设置一个或多个属性/值对。

$(selector).prop(property,value)

*
*
*

$("#abc>li").removeClass("tohosmethod-select");

$("#abc>li:eq(1)").addClass("tohosmethod-select");

$("#abc>li[data-value="京东"]").addClass("tohosmethod-select");

$("#abc>li[data-value="京东"]").trigger('click');

$("#abc option:contains("京东")").prop('selected', true);

$('#abc option:contains(京东)').prop('selected', true).trigger("change");

1、li单击事件-简单


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PropTest1</title>
    <style>

        .smallwrap > ul {
            display: flex;
            flex-wrap: wrap;
        }

            .smallwrap > ul li {
                flex: 1;
                height: 30px;
                line-height: 30px;
                padding: 0 5px;
                font-size: 14px;
                text-align: center;
                color: #606266;
                border: 1px solid #ccc;
                transition: all 0.2s;
                word-wrap: break-word;
                box-sizing: border-box;
                flex-wrap: nowrap;
                /*显示...*/
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .smallwrap > ul li:hover {
                    cursor: pointer;
                    background-color: rgba(0,0,0,.1);
                }

                .smallwrap > ul li:not(:first-child) {
                    border-left: 0;
                }

        .patient-need-options li:first-child {
            border-radius: 5px 0 0 5px;
        }

        .patient-need-options li:last-child {
            border-radius: 0 5px 5px 0;
        }

        .tohosmethod-select {
            background: rgb(200, 239, 254);
        }
    </style>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="smallwrap" id="tohosmethod-wrap1">
        <ul id="company" class="patient-need-options"></ul>
    </div>
    <br /><br />
    <select id="selCompany" name="selCompany" style="width:100%">
        <option value="0">请选择</option>
        <option value="1">京东</option>
        <option value="2">天猫</option>
        <option value="3">淘宝</option>
        <option value="4">苏宁</option>
    </select>
    <script>
        $(function () {
            loadCompany();
            companyClick();
        });

        function loadCompany() {
            let companyShell = [];
            var companyList = [
                { 'id': 1, 'isdefault': 0, 'text': '京东' },
                { 'id': 2, 'isdefault': 0, 'text': '天猫' },
                { 'id': 3, 'isdefault': 0, 'text': '淘宝' },
                { 'id': 4, 'isdefault': 0, 'text': '苏宁' },
            ];
            $.each(companyList, (index, item) => {
                if (item.text == "京东") {
                    companyShell.push(`<li title='${item.text}' style='color:red' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "天猫") {
                    companyShell.push(`<li title='${item.text}' style='color:#bf2209' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "淘宝") {
                    companyShell.push(`<li title='${item.text}' style='color:orange' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "苏宁") {
                    companyShell.push(`<li title='${item.text}' style='color:green' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else {
                    companyShell.push(`<li title='${item.text}' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                }
            })
            $('#company').append(companyShell.join(''));
        }

        function companyClick() {
            $("#company").on('click', 'li', function () {
                let that = $(this);
                let flag = 1;
                var allowMul = [
                    { 'id': 1, 'isdefault': 0, 'text': '京东' },
                    { 'id': 2, 'isdefault': 0, 'text': '天猫' },
                    { 'id': 3, 'isdefault': 0, 'text': '淘宝' },
                    { 'id': 4, 'isdefault': 0, 'text': '苏宁' },
                ];
                if (!!allowMul && allowMul.length) {
                    flag = Number(allowMul[0].text);
                }
                if (flag) {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select");
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");

                        $("#selCompany").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select");
                        changeCompany(that.text());
                    }
                }
                else {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");

                        $("#selCompany").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                        changeCompany(that.text());
                    }
                }
            })
        }

        function changeCompany(vText) {
            debugger
            $("#department>li").removeClass("tohosmethod-select");
            if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '京东') {
                $('#selCompany option:contains(京东)').prop('selected', true).trigger("change");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '天猫') {
                $('#selCompany option:contains(天猫)').prop('selected', true).trigger("change");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '淘宝') {
                $('#selCompany option:contains(淘宝)').prop('selected', true).trigger("change");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '苏宁') {
                $('#selCompany option:contains(苏宁)').prop('selected', true).trigger("change");
            }
        }
    </script>
</body>
</html>

效果图

2、li单击选择事件-联动

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PropTest</title>
    <style>

        .smallwrap > ul {
            display: flex;
            flex-wrap: wrap;
        }

            .smallwrap > ul li {
                flex: 1;
                height: 30px;
                line-height: 30px;
                padding: 0 5px;
                font-size: 14px;
                text-align: center;
                color: #606266;
                border: 1px solid #ccc;
                transition: all 0.2s;
                word-wrap: break-word;
                box-sizing: border-box;
                flex-wrap: nowrap;
                /*显示...*/
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .smallwrap > ul li:hover {
                    cursor: pointer;
                    background-color: rgba(0,0,0,.1);
                }

                .smallwrap > ul li:not(:first-child) {
                    border-left: 0;
                }

        .patient-need-options li:first-child {
            border-radius: 5px 0 0 5px;
        }

        .patient-need-options li:last-child {
            border-radius: 0 5px 5px 0;
        }

        .tohosmethod-select {
            background: rgb(200, 239, 254);
        }
    </style>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="smallwrap" id="tohosmethod-wrap1">
        <ul id="company" class="patient-need-options"></ul>
    </div>
    <br /><br />
    <div class="smallwrap" id="tohosmethod-wrap1">
        <ul id="department" class="patient-need-options"></ul>
    </div>
    <br /><br />
    <select id="selCompany" name="selCompany" style="width:100%">
        <option value="0">请选择</option>
        <option value="1">京东</option>
        <option value="2">天猫</option>
        <option value="3">淘宝</option>
        <option value="4">苏宁</option>
    </select>
    <br /><br />
    <select id="selDepartment" name="selDepartment" style="width:100%">
        <option value="0">请选择</option>
        <option value="1">家电</option>
        <option value="2">男装</option>
        <option value="3">箱包</option>
        <option value="4">手机</option>
    </select>

    <script>

        $(function () {
            loadCompany();
            loadDepartment();
            companyClick();
            departmentClick();
        });

        function loadCompany() {
            let companyShell = [];
            var companyList = [
                { 'id': 1, 'isdefault': 0, 'text': '京东' },
                { 'id': 2, 'isdefault': 0, 'text': '天猫' },
                { 'id': 3, 'isdefault': 0, 'text': '淘宝' },
                { 'id': 4, 'isdefault': 0, 'text': '苏宁' },
            ];
            $.each(companyList, (index, item) => {
                if (item.text == "京东") {
                    companyShell.push(`<li title='${item.text}' style='color:red' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "天猫") {
                    companyShell.push(`<li title='${item.text}' style='color:#bf2209' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "淘宝") {
                    companyShell.push(`<li title='${item.text}' style='color:orange' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "苏宁") {
                    companyShell.push(`<li title='${item.text}' style='color:green' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else {
                    companyShell.push(`<li title='${item.text}' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                }
            })
            $('#company').append(companyShell.join(''));
        }

        function loadDepartment() {
            let departmentShell = [];
            var departmentList = [
                { 'id': 1, 'isdefault': 0, 'text': '家电' },
                { 'id': 2, 'isdefault': 0, 'text': '男装' },
                { 'id': 3, 'isdefault': 0, 'text': '箱包' },
                { 'id': 4, 'isdefault': 0, 'text': '手机' },
            ];
            $.each(departmentList, (index, item) => {
                if (item.text == "家电") {
                    departmentShell.push(`<li title='${item.text}' style='color:red' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "男装") {
                    departmentShell.push(`<li title='${item.text}' style='color:#bf2209' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "箱包") {
                    departmentShell.push(`<li title='${item.text}' style='color:orange' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else if (item.text == "手机") {
                    departmentShell.push(`<li title='${item.text}' style='color:green' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                } else {
                    departmentShell.push(`<li title='${item.text}' class= "${item.isdefault ? 'tohosmethod-select' : ''}" data-value='${item.text}' index='${item.id}'>${item.text}</li>`);
                }
            })
            $('#department').append(departmentShell.join(''));
        }

        function companyClick() {
            ///单击事件
            $("#company").on('click', 'li', function () {
                let that = $(this);
                let flag = 1;
                var allowMul = [
                    { 'id': 1, 'isdefault': 0, 'text': '京东' },
                    { 'id': 2, 'isdefault': 0, 'text': '天猫' },
                    { 'id': 3, 'isdefault': 0, 'text': '淘宝' },
                    { 'id': 4, 'isdefault': 0, 'text': '苏宁' },
                ];
                if (!!allowMul && allowMul.length) {
                    flag = Number(allowMul[0].text);
                }
                if (flag) {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select");
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");
                        $("#department>li").removeClass("tohosmethod-select");

                        $("#selCompany").val('').trigger("change");
                        $("#selDepartment").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select");
                        changeCompany(that.text());
                    }
                }
                else {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");
                        $("#department>li").removeClass("tohosmethod-select");

                        $("#selCompany").val('').trigger("change");
                        $("#selDepartment").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                        changeCompany(that.text());
                    }
                }
            })
        }

        function changeCompany(vText) {
            debugger
            $("#department>li").removeClass("tohosmethod-select");
            if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '京东') {
                $('#selCompany option:contains(京东)').prop('selected', true).trigger("change");

                $("#department>li:eq(0)").addClass("tohosmethod-select");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '天猫') {
                $('#selCompany option:contains(天猫)').prop('selected', true).trigger("change");

                $("#department>li:eq(1)").addClass("tohosmethod-select");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '淘宝') {
                $('#selCompany option:contains(淘宝)').prop('selected', true).trigger("change");

                $("#department>li:eq(2)").addClass("tohosmethod-select");
            } else if (vText.substr(vText.lastIndexOf("(") + 1, 2) == '苏宁') {
                $('#selCompany option:contains(苏宁)').prop('selected', true).trigger("change");

                $("#department>li:eq(3)").addClass("tohosmethod-select");
            }
        }

        function departmentClick() {
            ///单击事件
            $("#department").on('click', 'li', function () {
                let that = $(this);
                let flag = 1;
                var allowMul = [
                    { 'id': 1, 'isdefault': 0, 'text': '家电' },
                    { 'id': 2, 'isdefault': 0, 'text': '男装' },
                    { 'id': 3, 'isdefault': 0, 'text': '箱包' },
                    { 'id': 4, 'isdefault': 0, 'text': '手机' },
                ];
                if (!!allowMul && allowMul.length) {
                    flag = Number(allowMul[0].text);
                }
                if (flag) {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select");
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");
                        $("#selDepartment").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select");
                        changeDepartment(that.text());
                    }
                }
                else {
                    //that.hasClass("tohosmethod-select") ? that.removeClass("tohosmethod-select") : that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                    if (that.hasClass("tohosmethod-select")) {
                        that.removeClass("tohosmethod-select");
                        $("#selDepartment").val('').trigger("change");
                    } else {
                        that.addClass("tohosmethod-select").siblings().removeClass('tohosmethod-select');
                        changeDepartment(that.text());
                    }
                }
            })
        }

        function changeDepartment(vText) {
            if (vText == "家电") {
                $('#selDepartment option:eq(1)').prop('selected', true).trigger("change");
            } else if (vText == "男装") {
                $('#selDepartment option:eq(2)').prop('selected', true).trigger("change");
            } else if (vText == "箱包") {
                $('#selDepartment option:eq(3)').prop('selected', true).trigger("change");
            } else if (vText == "手机") {
                $('#selDepartment option:eq(4)').prop('selected', true).trigger("change");
            } else {
                $('#selDepartment option:eq(0)').prop('selected', true).trigger("change");
            }
        }

        $("#selCompany").change(function () {
            debugger;
            var vList = [
                { 'id': 1, 'isdefault': 0, 'text': '京东' },
                { 'id': 2, 'isdefault': 0, 'text': '天猫' },
                { 'id': 3, 'isdefault': 0, 'text': '淘宝' },
                { 'id': 4, 'isdefault': 0, 'text': '苏宁' },
            ];
            var v = vList[0]['text'];
            var grade = $("#selCompany").val();
            if (grade == "京东") {
                
            } else if (grade == "天猫") {
                
            } else if (grade == "淘宝") {
               
            } else if (grade == "苏宁") {
                
            } else {
            }
        })
    </script>
</body>
</html>

效果图

*
*
*
*
*

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css ul li 操作 prop trigger

**$("#abc>li").removeClass("tohosmethod-select");$("#abc>li:eq(1)").addClass("tohosmethod-select");************
复制链接

扫一扫

专栏目录