Question

在下面的代码中，我该怎么做 - 如果我点击全部，它将显示买入和租赁 - 如果我点击购买，它将只显示购买（Rangeslider） - 如果我点击租金，它将只显示租金（Rangeslider）

    <div class="box-filter">
        <!---------------------------------------- Filtering Start ---------------------------------------->
        <ul data-role="listview" data-inset="false"  data-theme="d">
                <li>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend></legend>
                        <input name="radio-choice-h-1" id="radio-choice-h-1a" type="radio" checked="checked" value="">
                        <label for="radio-choice-h-1a">All</label>
                        <input name="radio-choice-h-1" id="radio-choice-h-1b" type="radio" value="1">
                        <label for="radio-choice-h-1b">Buy</label>
                        <input name="radio-choice-h-1" id="radio-choice-h-1c" type="radio" value="2">
                        <label for="radio-choice-h-1c">Rent</label>
                    </fieldset>
                </li>
            <!-- Buy Start -->
                <li id="rangeslider_buy">
                    <div data-role="rangeslider" data-mini="true">
                        <label for="range-1a">Buy</label>
                        <input name="range-1a" id="range-1a" min="0" max="2000" value="0" type="range" />
                        <label for="range-1b">Buy</label>
                        <input name="range-1b" id="range-1b" min="0" max="2000" value="2000" type="range" />
                    </div>
                </li>
            <!-- Buy End -->
            <!-- Rent Start -->     
                <li id="rangeslider_rent">
                    <div data-role="rangeslider" data-mini="true">
                        <label for="range-2a">Rent</label>
                        <input name="range-2a" id="range-2a" min="0" max="50000" value="0" type="range" />
                        <label for="range-2b">Rent</label>
                        <input name="range-2b" id="range-2b" min="0" max="50000" value="50000" type="range" />
                    </div>
                </li>
</ul></div>

Answer 1

更新

在 jQuery Mobile 中，建议使用类ui-screen-hidden而不是.show() / .hide()函数，以免破坏元素结构。此外，为了获得更好的结果，隐藏/显示元素后， listview 应刷新。

收听change点击的type=radio事件。给每个单选按钮一个值，并相应地显示/隐藏元素。

$(document).on("pageinit", function () {
    $("[type=radio]").on("change", function () {
        if ($(this).is(":checked")) {
            if ($(this).val() == "all") { /* All */
                $("#rangeslider_buy, #rangeslider_rent").removeClass("ui-screen-hidden");

            }
            if ($(this).val() == "buy") { /* Buy */
                $("#rangeslider_buy").removeClass("ui-screen-hidden");
                $("#rangeslider_rent").addClass("ui-screen-hidden");
            }
            if ($(this).val() == "rent") { /* Rent */
                $("#rangeslider_buy").addClass("ui-screen-hidden");
                $("#rangeslider_rent").removeClass("ui-screen-hidden");

            }
            $("listview_ID").listview("refresh");
        }
    });
});

<强> Demo

Answer 2

我不希望有if或switch，我希望尽可能重新使用代码，所以我会这样做为：

$(function(){

  $(".radio-selectors input[type='radio']").click(function() {
    // get selected radio area
    var radioType = $(this).attr("data-area");        
    // hide all
    $(".area-all").hide();
    // show correct
    $(".area-" + radioType).show();
  });

});

使用JQuery Mobile建议关于隐藏和显示的规则：

$(function(){

  $(".radio-selectors input[type='radio']").click(function() {
    // get selected radio area
    var radioType = $(this).attr("data-area");        
    // hide all
    $(".area-all").addClass("ui-screen-hidden");
    // show correct
    $(".area-" + radioType).removeClass("ui-screen-hidden");
  });

});

新演示：http://jsbin.com/rokohive/3/edit?html,js,output

我会将类附加到HTML代码中：

<ul ... class="radio-selectors">

<input id="radio-choice-h-1a" data-area="all" ...
<input id="radio-choice-h-1b" data-area="buy" ...
<input id="radio-choice-h-1c" data-area="rent" ...

和

<li id="rangeslider_buy" class="area-buy area-all">
<li id="rangeslider_rent" class="area-rent area-all">

这样，稍后您只需添加更多radio按钮和更多areas，您就不必更改javascript代码：

JsBin演示：http://jsbin.com/rokohive/1/edit?html,js,output

Answer 3

试试这个http://jsfiddle.net/4f55k/

var $buy = $('#rangeslider_buy'), $rent = $('#rangeslider_rent');

$('#radio-choice-h-1a').click(function () { $buy.add($rent).show() });
$('#radio-choice-h-1b').click(function () { $rent.hide(); $buy.show(); });
$('#radio-choice-h-1c').click(function () { $rent.show(); $buy.hide(); });

动画：http://jsfiddle.net/4f55k/1/

显示在Jquery Mobile中通过单选按钮隐藏列表

3 个答案:

更新