Javascript样式显示无法正常工作

在我的网站上，人们可以选择修理他们的电子产品。单击“修复我的手机”时，滑块将显示div id:device\u选项。有两种选择，手机和平板电脑。当他们点击平板电脑时，手机的型号也会显示出来。但当我点击平板电脑的时候，我的代码里没有这个

//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');});

---

我们可以看到你的HTML和CSS吗？为什么不使用.hide和.show？请使用Jona在这里发布一个，CSS已经发布了。Barmer，我现在就试试不，那不行。而且这在电话选择上也不会发生。所以，如果我选择了手机，平板电脑品牌仍然是hiddenI，我已经修改了我的答案，希望效果更好。不，仍然不起作用：我会说双重和三重检查你们所有人的id=。。。参数匹配。很难说什么是错的，但我认为它是在HTML中。

$(".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');});