javascript - Javascript 样式显示无法正常工作
问题描述
在我的网站上,人们可以选择修理他们的电子产品。单击修复我的手机时,将显示一个滑块(div id:device_choice)。有 2 个选项,手机和平板电脑。当他们点击平板电脑时,手机的型号也会显示出来。但是当点击平板电脑时,我的代码中没有任何地方?!
//THESE ARE THE CODE FOR THE PHONE CHOICE:
//This is the first slider where people can choose between device_phone or device_tablet. When clicked slider brand show up! THIS IS THE SLIDER THAT ALSO DOES SHOW UP WHEN .DEVICE_TABLET IS CLICKED!
$(".device_phone").click(function(){
document.getElementById('device_choice').style.display='none';
document.getElementById('device_phone_brand').style.display='block';
console.log('Phone chosen');});
//Second slider where apple models shop up for the phone, when device_phone_brand_apple is clicked
$(".device_phone_brand_apple").click(function(){
document.getElementById('device_phone_brand').style.display='none';
document.getElementById('device_phone_models_apple').style.display='block';
console.log('Apple models chosen, so show me all Apple phones!');});
//Second slider where samsung models shop up for the phone, when device_phone_brand_samsung is clicked
$(".device_phone_brand_samsung").click(function(){
document.getElementById('device_phone_brand').style.display='none';
document.getElementById('device_phone_models_samsung').style.display='block';
console.log('Samsung models chosen, so show me all Samsung phones!');});
//THESE ARE THE CODE FOR THE TABLET CHOICE:
//This is the first slider where people can choose between device_phone or device_tablet. When clicked slider brand show up!
$(".device_tablet").click(function(){
document.getElementById('device_choice').style.display='none';
document.getElementById('device_tablet_brand').style.display='block';
console.log('Tablet chosen');});
//Second slider where apple models shop up for the tablet, when device_tablet_brand_apple is clicked
$(".device_tablet_brand_apple").click(function(){
document.getElementById('device_tablet_brand').style.display='none';
document.getElementById('device_tablet_models_apple').style.display='block';
console.log('Apple models chosen, so show me all Apple tablets!');});
//Second slider where samsung models shop up for the tablet, when device_tablet_brand_samsung is clicked
$(".device_tablet_brand_samsung").click(function(){
document.getElementById('device_tablet_brand').style.display='none';
document.getElementById('device_tablet_models_samsung').style.display='block';
console.log('Samsung models chosen, so show me all Samsung tablets!');});
这是我在单击修复之前隐藏行的 CSS 以及我在 CSS 之前使用的旧代码:
#device_choice{display:none;}
#device_phone_brand{display:none;}
#device_tablet_brand{display:none;}
#device_phone_models_apple{display:none;}
#device_phone_models_samsung{display:none;}
//THESE ARE THE OLD CODE THAT I USED FOR THE HIDE AND SHOW BUT DOES NOT WORK ANYMORE?!
document.getElementById('device_phone_brand').style.display='none'; //
document.getElementById('device_tablet_brand').style.display='none'; //
document.getElementById('device_phone_models_apple').style.display='none';
document.getElementById('device_tablet_models_apple').style.display='none';
document.getElementById('device_phone_models_samsung').style.display='none';
console.log('Hide before click');
$(".device_phone_brand_apple").click(function(){console.log('device_phone_brand_apple klik'); updateProgressBar(33); removeDeviceChoice('phone' ,'apple');});
$(".device_phone_brand_samsung").click(function(){console.log('device_phone_brand_samsung klik'); updateProgressBar(33); removeDeviceChoice('phone' ,'samsung');});
});
function removeDeviceChoice(chosen_device) {
document.getElementById('device_choice').style.display='none';
document.getElementById('device_' + chosen_device+'_brand').style.display='block';
console.log('removeDeviceChoice('+chosen_device+') uitgevoerd');
}
function removeBrandChoice(chosen_device, chosen_brand) {
document.getElementById('device_' + chosen_device + '_brand').style.display='none';
document.getElementById('device_' + chosen_device + '_models_' + chosen_brand).style.display='block';
console.log('removeBrandChoice('+chosen_device+','+chosen_brand+') uitgevoerd');
}
解决方案
然后将您的旧方法添加为功能-
function hideAll() {
document.getElementById('device_phone_brand').style.display='none';
document.getElementById('device_tablet_brand').style.display='none';
document.getElementById('device_phone_models_apple').style.display='none';
document.getElementById('device_tablet_models_apple').style.display='none';
document.getElementById('device_phone_models_samsung').style.display='none';
document.getElementById('device_tablet_models_samsung').style.display='none';
}
然后如下使用
$(".device_phone").click(function(){
document.getElementById('device_choice').style.display='none';
hideAll(); // hide everything
document.getElementById('device_phone_brand').style.display='block';
console.log('Phone chosen');});
...
$(".device_tablet").click(function(){
document.getElementById('device_choice').style.display='none';
hideAll(); // hide everything
document.getElementById('device_tablet_brand').style.display='block';
console.log('Tablet chosen');});
推荐阅读
- clojure - Clojure 中究竟是如何处理 POST 请求主体的?(http-kit,组合)
- c# - C# MongoDB GeoJsonPoint JSON 对象
- ubuntu-18.04 - 如何在 Ubuntu18.04 中安装 liblog4cxx10-dev
- tensorflow - 尝试使用 NVIDIA Geforce 920M 运行 Tensorflow 代码
- android - 什么导致致命异常:android.view.InflateException?
- java - 我必须拆分用户以 DDMMYYYY 格式输入的日期。但是,如果您输入 70702000 它会显示我的所有 3 个错误而不是一个
- plot - Julia Langauge 微分方程示例
- c++ - 为什么我的 Qt5 QPixmap 没有正确显示使用某些 OpenCV 算法处理的帧?
- unity3d - Unity WebGL 检查是否移动
- twitter-bootstrap - 关于 aria- describeby 和表单字段最佳实践的可访问性问题