Question

我从这个SO question修改了一组简单的下拉选项。如果我在jQuery（没有JQM）中运行它，它正常运行，当我添加jQuery Mobile时，HTML只在页面上闪烁，然后它变成空白，我无法弄清楚原因。如果我启用jQuery Mobile并注释掉JS的最后一行：

showTab(select.val());

它将显示所有可用选项，而不是只有一个选项的所需结果。在下面的小提琴中，选择jQuery Mobile，然后运行它，HTML会在闪烁一秒后消失。

下面的工作小提示显示它处于我想要的工作状态，在选择完成后，只显示下拉选择的选项。但我希望jQuery Mobile能够正常运行。忽略提交按钮，它还没有连接任何东西。

Working Fiddle

HTML：

<form>
    <p>
         <h2>Select option to create PCBID:</h2>

        <select id="dropdown" name="dropdown">
            <option value="pcbids" selected="selected">PCBID Single</option>
            <option value="pcbidr">PCBID Range</option>
            <option value="pcbidq">PCBID Quantity</option>
            <option value="pcbidl">PCBID List</option>
        </select>
    </p>
</form>
<body>
    <div id="pcbids">
        <label>PCBID Single:</label>
        <input type="number" placeholder="12345" title="Just enter a single PCBID number" />
    </div>
    <div id="pcbidl">
        <label>PCBID List:</label>
        <input type="textarea" placeholder="12345,70237,8901" title="Enter a comma separated list of PCBID numbers you're like to create" />
    </div>
    <div id="pcbidr">
        <label>PCBID Range:</label>
        <input type="text" placeholder="12345-12400" title="Enter a range separated by a dash (-) and no spaces" />
    </div>
    <div id="pcbidq">
        <label>PCBID Quantity:</label>
        <input type="text" placeholder="12345:100" title="Enter a starting PCBID number followed by a colon (:), followed by the sequential number you want to create" />
    </div>
    <label for="submit"></label>
    <input type="button" id="create_button" value="Submit" />

JS：

var select = $('#dropdown');
function showTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}

select.change(function () {
showTab($(this).val());
});
//comment out this last line after selecting jQuery Mobile 1.3.1 under Frameworks & Extensions above
showTab(select.val());

我已尝试在$(document.ready(function(){...}); construct加载代码，以及$(window).load(function() {...});加载第二个代码我可以获得显示加载JQM的整个选项列表，但是只要我选择一个，整个页面再次消失。

我错过了什么？如果它有任何区别，这一切都在Chrome中。作为参考，这里是the original fiddle I modified。

Answer 1

jQuery Mobile将每个input和button包装在一个包含所有样式的div中。

使用$('div').not(name).hide();时，隐藏页面中的每个div，包括input包装器。但是，使用.show()时，会显示父div，但所有元素仍然隐藏。相反，请隐藏以pcbid而不是div开头的div。

$('[id^=pcbid]').not(name).hide();
$(name).show();

<强> Demo

为什么添加jQuery Mobile导致HTML消失？

1 个答案: