0

我正在更新网站并逐渐将所有位更改为 jquerymobile 以使其对手机更加友好。

我有一个页面，用户可以在其中选择特定月份或日期范围。我使用一些javascript在它们之间切换。但是，由于更改内容，显示：块等似乎无法正常工作。它显示它们不在位置。当您在它们之间切换时，输入字段现在显示在选择器上方。请参阅http://jsfiddle.net/pfLme/1/

显然我想让他们进入正确的位置。（下一个任务是尝试让 Datepicker 工作 - 如果有人愿意为我指出正确的方向）

谢谢你。

（代码都在 jsfiddle 上，但是 stackoverflow 告诉我我也需要在这里包含它）

    function showType(allornone) {

    if (allornone == '1month')

    {
        document.getElementById('btwdateselector').style.display = 'none';
        document.getElementById('monthselector').style.display = 'block';

        document.getElementById('datestart').value = '';
        document.getElementById('dateend').value = '';

    }
    if (allornone == '2dates')

    {
        document.getElementById('btwdateselector').style.display = 'block';
        document.getElementById('monthselector').style.display = 'none';
    }

} //end function

...我现在当然意识到我必须习惯于思考和利用 jquery mobile 的 jquery 方面。到目前为止，我想出了

$(document).on('click', '#certainmonth', function(a) {
    $('#monthselector').hide();});

$(document).on('click', '#btwdates', function(a) {
    $('#btwdateselector').show();});

我还不确定如何包含 if 语句并在显示和隐藏之间切换。

4

1 回答 1

0

该错误仅在 Firefox 27.0.1 中发生

解决方案是更改<fieldset data-type="controlgroup">为<div data-type="controlgroup">收音机框周围。感谢奥马尔的帮助。

http://jsfiddle.net/pfLme/11/

<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
    <div data-role="controlgroup">
        <legend>Should be at TOP</legend>
        <input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
        <label for="certainmonth">Mileage for certain month</label>
        <input type="radio" name="searchtype" value="btwdates" id="btwdates" />
        <label for="btwdates">Mileage between two dates</label>
    </div>
    <fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
        <select name="month" data-native-menu="false">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select name="year" data-native-menu="false">
            <option value="2000">2000</option>
            <option value="2001">2001</option>
        </select>
    </fieldset>
    <fieldset id="btwdateselector" class="ui-screen-hidden">
        <div class="ui-field-contain">
            <label for="datestart">Start Date:</label>
            <input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
        </div>
        <div class="ui-field-contain">
            <label for="dateend">End Date:</label>
            <input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
        </div>
    </fieldset>
    <input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>


$(document).on('change', '#certainmonth, #btwdates', function (a) {
    $('#monthselector').toggleClass("ui-screen-hidden");
    $('#btwdateselector').toggleClass("ui-screen-hidden");
});
于 2014-02-24T00:56:02.457 回答