Question

在我的网站上，人们可以选择修理他们的电子产品。单击修复我的手机时，将显示一个滑块（div id：device_choice）。有两个选项，手机和平板电脑。当他们点击平板电脑时，手机的型号也会显示出来。但是，当点击平板电脑时，我的代码中的任何地方都没有？！

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

Answer 1

然后添加您作为函数执行此操作的旧方法 -

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

Javascript样式显示无法正常工作

1 个答案: