Question

我有一个在jQuery中定义的对象，我有列表，我需要创建一个函数来检查列表中是否有一个对象被选中。我正在尝试使用此代码，但它无法正常工作。有人能帮我吗？ .selectable是列表。

if ( $('.selectable').is(':selected') ) {
            $('#edit').click(function () {
                $('#high-level').hide();
                $('#low-level').show();
            })

        }

Answer 1

循环遍历数组，测试是否选中了每个元素。下面的代码假设list是一个元素ID数组。

var is_selected = false;
for (var i = 0; i < list.length; i++) {
    if ($("#" + list[i]).is(":selected")) {
        is_selected = true;
        break;
    }
}

Answer 2

将此行更改为：

$('.selectable').append("<li><span class='name'>" + data[i].name + " </span><span class='grade'>" + prosek + "</span></li>");

注释这一行（这不是一个函数）并会出错：

//$('.selectable').selectable();

像这样更改你的功能：

$('.selectable li').on('click', function(){
                console.log($(this).find('.name').html());
                    var name = $(this).find('.name').html();
                    var grade = $(this).find('.grade').html();
                    $("#name").val(name)
                    $("#index").val(grade)
                    $('#high-level').hide();
                    $('#low-level').show();

            })

现在只需点击学生姓名即可将学生数据加载到输入中。实际上你不需要额外的按钮就可以了。

注意：我建议您这样做，因为您的目标是检索学生姓名。

新评论的其他信息：

这是清单：

这就是我点击其中一个：

以下是完整的HTML页面，也许您的javascript位置错误：

<!--DOCTYPE html -->
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <META HTTP-EQUIV="Expires" CONTENT="-1">
<meta name="description" content="">
<meta name="keywords" content="">

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style type="text/css">
        label {
            display: inline-block;
            width: 100px;
            margin: 5px;
        }

        input {
            width: 90px;
            margin: 5px;
        }

        li:hover {
            cursor: pointer;
        }

        #feedback {
            font-size: 1.4em;
        }

        .selectable .ui-selecting {
            background: #FECA40;
        }

        .selectable .ui-selected {
            background: #F39814;
            color: white;
        }

        .selectable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 40%;
            display: inline-block;
        }

        .selectable li {
            margin: 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 50px;
        }

        .content {
            width: 300px;
            background: #eef;
            padding: 5px;
            border: 1px grey dotted;
            font-size: 1.4em;
        }

        ul {
            list-style: none;
        }
    </style>


</head>
<body>

<div id="high-level">
    <button id="edit">Edit students</button>
    <br/><br/>
    <ol class="selectable"></ol>
</div>

<div id="low-level">
    <div>
        <input id="prev" value="prev" type="button"/>
        <input id="top" value="top" type="button"/>
        <input id="next" value="next" type="button"/>
    </div>
    <label>Name</label>
    <input id="name" class="content"></input><br/>
    <label>Index</label>
    <input id="index" class="content"></input>

    <div id="grades" style="overflow: hidden;"></div>
    <button id="save">Save</button>
</div>





    <script type="text/javascript">
        var data = [
            {
                index: 123123,
                name: "Nikola Nikolovski",
                grades: [
                    {
                        course: "Calculus",
                        grade: 10
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "Interactive Applications",
                        grade: 10
                    },
                ],
                edit: false
            },
            {
                index: 123124,
                name: "Petko Petkovski",
                grades: [
                    {
                        course: "User Interfaces",
                        grade: 8
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "Interactive applications",
                        grade: 8
                    },
                ],
                edit: false
            },
            {
                index: 123125,
                name: "Petar Petrevski",
                grades: [
                    {
                        course: "Calculus",
                        grade: 6
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "User Interfaces",
                        grade: 10
                    },
                ],
                edit: false
            }

        ];

        $(document).ready(function () {

            $('#high-level').show();
            $('#low-level').hide();

            for (var i = 0; i < data.length; i++) {

               var sum = 0;
               var prosek = 0;

               for (var j = 0; j < data[i].grades.length; j++) {
                   sum += data[i].grades[j].grade;
               }

               prosek = sum / data[i].grades.length;
               prosek = prosek.toFixed(2);


               $('.selectable').append("<li><span class='name'>" + data[i].name + " </span><span class='grade'>" + prosek + "</span></li>");
            }



            var $selected = $('.selectable .ui-selected').val();

            console.log($selected)

             $('.selectable li').on('click', function(){
                console.log($(this).find('.name').html());
                    var name = $(this).find('.name').html();
                    var grade = $(this).find('.grade').html();
                    $("#name").val(name)
                    $("#index").val(grade)
                    $('#high-level').hide();
                    $('#low-level').show();

            })



            $('#top').click(function () {
                $('#high-level').show();
                $('#low-level').hide();
            });

        })

    </script>

</body></html>

如何检查对象是否被选中？

2 个答案: