我有一个JS函数,它只显示一个li元素,并隐藏所有其他的li元素,包含一个基于设备检测条件的无序列表。
HTML<ul id="menu">
<li id="mainMenuGroup_mostPopular"></li>
<li id="mainMenuGroup_slots"></li>
<li id="mainMenuGroup_table"></li>
<li id="mainMenuGroup_roulette"></li>
<li id="mainMenuGroup_poker"></li>
<li id="mainMenuGroup_mobileiOS"></li>
<li id="mainMenuGroup_mobileAndroid"></li>
<li id="mainMenuGroup_mobileWinPhone"></li>
</ul>
JS
function deviceDetectionScript() {
var mobileDetection = new MobileDetect(window.navigator.userAgent);
if (mobileDetection.mobile()) {
if (mobileDetection.os() == 'iOS') {
alert('iOS detected'); //alert is working fine on ipad
$('ul#menu > li').not('#mainMenuGroup_mobileiOS').hide(); // this is not working
show_tab_content('mobileiOS'); // this function makes the selected li active - working fine
}
else if (mobileDetection.os() == 'AndroidOS') {
alert('Android detected'); //alert is working fine on android tab
$('ul#menu > li').not('#mainMenuGroup_mobileAndroid').hide(); // this is not working
show_tab_content('mobileAndroid'); // this function makes the selected li active - working fine
}
else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
alert('windows detected'); //alert is working fine on windows phone
$('ul#menu > li').not('#mainMenuGroup_mobileWinPhone').hide(); // this is not working
show_tab_content('mobileWinPhone'); // this function makes the selected li active - working fine
}
}
}
我试着在循环内使用警报,检测工作很好,还有一个额外的功能show_tab_content('listID');
所有这些似乎都很好,除了jquery hide()
方法$('ul#menu > li').not('#listID').hide();
我尝试添加else条件来检查它是否不是移动设备,并且脚本在桌面浏览器上运行良好。
function deviceDetectionScript() {
var mobileDetection = new MobileDetect(window.navigator.userAgent);
if (mobileDetection.mobile()) {
if (mobileDetection.os() == 'iOS') {
// Same as above
}
else if (mobileDetection.os() == 'AndroidOS') {
// Same as above
}
else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
// Same as above
}
}
else {
alert('Desktop detected'); //alert is working fine on desktop
$('ul#menu > li').not('#mainMenuGroup_poker').hide(); // this is working fine on desktop
show_tab_content('poker'); // this function makes the selected li active - working fine
}
}
是否有什么我需要确保hide()方法也适用于移动/平板电脑?
我在处理移动设备时也遇到了一些问题。
你能不能试试这个代码
$('ul#menu > li').not('#mainMenuGroup_poker').each(function(){
var unwanted_li = $(this);
unwanted_li[0].style.display = 'none';
});
我没有测试上面的代码,但我认为它会工作。
要添加,unwanted_li的零索引有对象的DOM引用。
* * * * 具体问题和解决方案 * * * *
经过长时间的调查,这就是手机版无法运行的确切原因。
在这个场景中两个函数并行工作。一个是在JS开始执行时调用,另一个是在document.ready.
在这个场景中,document。Ready甚至在其他函数停止工作之前被调用,因此这个函数没有可以隐藏的空间。
例如(函数名已被更改以保密细节)
第1245行
<script type="text/javascript">
abc(false,true); // this is the function which was actually adding the li s
</script>
第1456行
<script type="text/javascript">
// Device detection
$(document).ready(function() {
hidingScript();
});
</script>
所以,在上面的例子中,隐藏脚本甚至在abc停止加载html之前就开始执行了。为了防止这种情况,建议修改
<script type="text/javascript">
// Device detection
$(document).ready(function() {
abc();
hidingScript();
});
</script>
**如果abc正在调用ajax,然后附加html,那么你需要在ajax调用成功事件中调用隐藏脚本