代码（视图）

我正在使用JQuery selectable来完成工作。您可以从找到的here的api文档中了解更多相关信息。我试图让jquery根据是否检查了无线电盒来“过滤”。显然，这种方法是失败的。

编辑我认为这种方法失败了，因为它加载了一次javascript？因此，当我更改单选按钮时，我的过滤器定义不会改变。

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Details</title>
    <link rel="stylesheet" href="~/css/table.css" />
    <script>
        $(document).ready(function(){


            //Have this be a conditional based on radio input
            var getRad1 = document.getElementById('optionsRadios1');
            if (getRad1.checked)
            {
                console.log("Check has passed for Check in");

                $("#selectable").selectable({
                    filter: ".success"
                });

                //getter
                var filter = $(".selector").selectable("option", "filter");
            }

            //option 2
            var getRad2 = document.getElementById('optionsRadios2');
            if (getRad2.checked) {
                //$("#selectable").selectable("refresh");

                console.log("Check has passed for Check in");

                $("#selectable").selectable({
                    filter: ".info"
                });

                //getter
                var filter = $(".selector").selectable("option", "filter");
            }



            //I am not sure what this is doing 
            var select_range = false;

            //queue of objects to deselect 
            var deselect_queue = [];




            //http://stackoverflow.com/questions/3691773/jquery-ui-event-and-ui-object-properties
            $("#selectable").selectable({

                selecting: function(event, ui)
                {
                    var selecting = $(ui.selecting);
                    if (selecting.hasClass('ui-selected')) {
                        deselect_queue.push(selecting);
                    }
                },


                //This is what keeps previous selected items as selected? 
                unselecting: function (event, ui) {
                    $(ui.unselecting).addClass('ui-selected');
                },


                //Triggered at the end of the select operation 
                stop: function () {
                    if (!select_range) {
                        for (var i = 0; i < deselect_queue.length; i++) {
                            deselect_queue[i]
                              .removeClass('ui-selecting')
                                .removeClass('ui-selected')
                        }
                    }
                    select_range = false;
                    deselect_queue = [];

                    //Something else went here that I didn't understand
                }
            });  

        });
    </script>
</head>
<body>



        @{ int columnN = Model.columnNumber;}
        @{ int rowN = Model.rowNumber;}
        @{ int index = 1;}
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>#</th>
                @for (int j = 1; j <= columnN; j++)
                {
                    <th>@j.ToString()</th>
                }
            </tr>

        </thead>
        <tbody id="selectable">
            @for (int i = 1; i <= rowN; i++)
            {
                <tr>
                    <th>@i.ToString()</th>
                    @for (int k = 1; k <= columnN; k++)
                    {
                        if (k % 2 == 0)
                        {
                            <td  class="book success" data-id=@index> @index.ToString() </td>
                        }
                        else
                        {
                            <td class="book info" data-id=@index> @index.ToString() </td>
                        }
                        index++;
                    }
                </tr>
            }
        </tbody>
    </table>
    <form class="form-horizontal">
        <fieldset>
            <legend>Legend</legend>        
            <div class="form-group">
                <label class="col-lg-2 control-label">Radios</label>
                <div class="col-lg-10">
                    <div class="radio">
                        <label>
                            <input name="optionsRadios" id="optionsRadios1" type="radio" checked="" value="option1">
                            Check out (Depopulate)
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input name="optionsRadios" id="optionsRadios2" type="radio" value="option2">
                            Check in (populate)
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</body>
</html>

尝试

我正在尝试在主javascript函数中使用条件。它适用于初始时间并设置一切然后失败。
我可以有两个单独的视图，但这会破坏动态页面内容的目的。

我认为我接近尝试阅读dom元素并改变我的javascript行为，但我无法让它正常工作（我也可能会离开）。我非常感谢任何可以提供的帮助。

Answer 1

我正在编写此解决方案，希望其他人可能会发现此帖有用。

解决方案

单选按钮需要一个监听器。因此有必要向他们添加onclick =“”。但是，我需要的是两个函数来实现我所寻求的行为。否则，即使使用单选按钮，javascript也会加载然后变得无用。

仅选择元素为绿色
仅选择蓝色的元素

因此，需要将以下功能添加到javascript：

        function populate() {
               //$("#selectable").selectable("refresh");

                console.log("Check has passed for Check in");
                $(".selector").selectable("refresh");

                $("#selectable").selectable({
                    filter: ".info"
                });

                var filter = $(".selector").selectable("option", "filter", ".info");

        };


        function depopulate() {
            console.log("Check has passed for Check in");
            $(".selector").selectable("refresh");

            $("#selectable").selectable({
                filter: ".success"
            });

            var filter = $(".selector").selectable("option", "filter", ".success");
        };

单选按钮需要修改如下：

<input name="optionsRadios" id="optionsRadios1" type="radio" checked="" value="option1" onclick="depopulate()">
<input name="optionsRadios" id="optionsRadios2" type="radio" value="option2" onclick="populate()">

在此之后，单击单选按钮将为我们提供所需的行为。

单选按钮不会改变javascript如何选择我的表格元素？

代码（视图）

尝试

1 个答案:

解决方案