jquery移动翻转切换到更新列表

Question

我试图使用切换开关来更新列表，但是我找不到解决方案。你们有什么意见吗？任何提示都将不胜感激:)。

重要：.ui-li列表id是从服务器中填充的#myListView，其中data-value作为+item.Gender+“女性”或“男性”填充。我想要创建一个代码，如果用户使用切换关闭男性，那么列表将更新，只显示“女性”值在li。反之亦然。

到目前为止，我有以下(没有工作)代码：

$(document).on("pagecreate", "#page-settings", function (){
$("#flip-1").on("change", function (){
    if ($(this).val() == "off"){
        $("#myListView").val($(item.Gender =="female")).listview( "refresh" );
    }

});

});

我的HTML看起来如下：

<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >    
        <label for="flip-1">Men</label>
        <select name="flip-1" id="flip-1" data-role="slider"data-mini="true" class="genderSelect">
            <option value="off"></option>
            <option selected="selected" value="on"></option>
        </select> 
    </div>

    <div data-role="fieldcontain" id="womenSelector" >  
        <label for="flip-2">Women</label>
        <select name="flip-2" id="flip-2" data-role="slider"data-mini="true" class="genderSelect">
            <option value="off"></option>
            <option selected="selected" value="on"></option>                
        </select>           
    </div>

Answer 1

假设您的li有一个性别的数据属性，例如。

<li data-gender="female"></li>

然后，当你打开一个开关，首先显示所有的歌词：

$('#myListView li').show();

然后隐藏男性或女性：

$('#myListView li[data-gender="male"]').hide();

更新：

因此，给定翻转开关，处理更改事件，并在每次更改时调用一个名为ShowList()的函数。在ShowList()中，检查哪个翻转开关是打开的，如果一个是打开的，另一个是关闭的，隐藏关闭的性别：

$(document).on("pagecreate", "#page1", function(){
    $("#flip-1").on("change", function(){
        if ($(this).val() == "off"){
            $("#flip-2").val("on").slider( "refresh" );
        }

        ShowList();
    });
    $("#flip-2").on("change", function(){
            if ($(this).val() == "off"){
            $("#flip-1").val("on").slider( "refresh" );
        }

        ShowList();
    });
});

function ShowList(){
    var m = $("#flip-1").val() == "on";
    var f = $("#flip-2").val() == "on";
    $('#myListView li').show();
    if (m && !f) {
        $('#myListView li[data-gender="female"]').hide();
    } else if (!m && f) {
        $('#myListView li[data-gender="male"]').hide();
    }
}

演示