Question

我有这个HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">
    [data-Status = "Used"]{
        background-color: green;
    }

    [data-Status = "Inactive"]{
        background-color: red;
    }

    [data-Status = "Active"]{
        background-color: gray;
    }
</style>
</head>
<body>

<div>
    <input type="checkbox" onclick="Changestatus('Combo_1')" id="Combo_1" />
    <div class="Combo_1 Activity_1" id="Activity_1" data-Status="Active">Activity_1</div>
    <div class="Combo_1 Activity_2" id="Activity_2" data-Status="Active">Activity_2</div>
    <div class="Combo_1 Activity_3" id="Activity_3" data-Status="Active">Activity_3</div>
    <div class="Combo_1 Activity_5" id="Activity_5" data-Status="Active">Activity_5 C3</div>
</div>
<div>
    <input type="checkbox" onclick="Changestatus('Combo_2')" id="Combo_2"/>
    <div class="Combo_2 Activity_1" id="Activity_1" data-Status="Active">Activity_1 C1</div>
    <div class="Combo_2 Activity_3" id="Activity_3" data-Status="Active">Activity_3 C1</div>
    <div class="Combo_2 Activity_4" id="Activity_4" data-Status="Active">Activity_4 C3</div>
</div>
<div>
    <input type="checkbox" onclick="Changestatus('Combo_3')" id="Combo_3"/>
    <div class="Combo_3 Activity_4" id="Activity_4" data-Status="Active">Activity_4 C2</div>
    <div class="Combo_3 Activity_5" id="Activity_5" data-Status="Active">Activity_5 C1</div>
    <div class="Combo_3 Activity_6" id="Activity_6" data-Status="Active">Activity_6</div>
</div>
</body>
</html>

我必须在复选框检查中更改常用活动的属性

例如

我检查了 Combo_1 ，因此数据状态变为已使用，其他组合常见活动数据 - 状态*应更改为**无效如果我取消选中此Combo，则所有常见 [data-Status = Inactive] 应更改为 [data-Status = Active] ;

此代码我已编写并且有效但有最简单的方法

function Changestatus(element){
    var Active_Class = $('.'+element);
    if ($('#'+element).prop("checked") == true) {

        for(var i = 0; i < Active_Class.length; i++){
            if ($(Active_Class[i]).attr("data-Status") == 'Active') {
                $(Active_Class[i]).attr("data-Status", "Used");
            };
        }

        $('.'+element).each(function() {
            var elem_id = this.id;
            var Active_ID_Class = $('.'+elem_id);
            for(var i = 0; i < Active_ID_Class.length; i++){
                if ($(Active_ID_Class[i]).attr("data-Status") == 'Active') {
                    $(Active_ID_Class[i]).attr("data-Status", "Inactive");
                };
            }

        });
    }

    else if ($('#'+element).prop("checked") == false){

        for(var i = 0; i < Active_Class.length; i++){
            if ($(Active_Class[i]).attr("data-Status") == 'Used') {
                $(Active_Class[i]).attr("data-Status", "Active");
            };
        }

        $('.'+element).each(function() {
            var elem_id = this.id;
            var Active_ID_Class = $('.'+elem_id);
            var Used_Activiy = false;

            for(var i = 0; i < Active_ID_Class.length; i++){
                if ($(Active_ID_Class[i]).attr("data-Status") == 'Used') {
                    Used_Activiy = true;
                };
            }
            if (Used_Activiy != true) {
                for(var i = 0; i < Active_ID_Class.length; i++){
                    $(Active_ID_Class[i]).attr("data-Status", "Active");
                }
            };

        });
    }
}

至少选择两个组合来理解我的问题

如何使用jQuery在条件上更改attr

0 个答案: