jquery mobile flip toggleswitch更新列表

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();
    }
}

DEMO