jQuery的变化显示CSS不能正常工作

我有一个代码jQuery的变化显示CSS不能正常工作

<script type="text/javascript"> 
    $(window).load(function(){ 
      debugger 
      $('#comp').ready(function() { 
       $('#QV101').css("display", "inline"); 
       $('#QV102').css("display", "none"); 
       $('#QV103').css("display", "none"); 
      }); 

      $('#comp').on('click', function(event) { 
       debugger 
       $('#QV101').css("display", "inline"); 
       $('#QV102').css("display", "none"); 
       $('#QV103').css("display", "none"); 
      }); 
      $('#mes').on('click', function(event) { 
       debugger 
       $('#QV101').css("display", "none"); 
       $('#QV102').css("display", "inline"); 
       $('#QV103').css("display", "none"); 

      }); 
      $('#hora').on('click', function(event) { 
       debugger 
       $('#QV102').css("display", "none"); 
       $('#QV101').css("display", "none"); 
       $('#QV103').css("display", "inline"); 

      }); 
      debugger 

     }); 
</script>

的问题是，该脚本显示元素idQV101，但是当我点击其他按钮这些不相反，在显示任何东西Web控制台的CSS更改正确，但在屏幕上不显示。我不想使用隐藏，因为在屏幕上出现一个丑陋的空白。因为这些元素下有别人因为这些元素下还有其他元素

它是HTML代码中的值#QV ...它我因为...插入qlik代码，并显示在图表

Comparativa Consumo MES consumo Hora的 Consumo直径

   <div id="QV101" class="col-md-12 qvobject">  
       </div> 
       <div id="QV102" class="col-md-12 qvobject">  
       </div> 
       <div id="QV103" class="col-md-12 qvobject"> 

       </div> 

      </div> 



      <div class="row"> 
       <div id="QV114" class="col-md-2 qvplaceholder"> 

       </div> 
       <div id="QV115" class="col-md-2 qvplaceholder">

   </div> 
       <div id="QV117" class="col-md-2 qvplaceholder"> 

       </div> 

      </div> 
     </div> 
    </div>

谢谢

来源

2016-06-10 corting

更好的添加或删除类，而不是直线前进的设置CSS – guradio

如果'Web控制台的CSS改变正确，但在屏幕上不显示'，所以你的问题是不是关于你的发布代码，但关于CSS规则或HTML标记或...提供MCVE –

我不知道，因为如果我删除此$（' （'＃QV101'）。css（“display”，“inline”）; $（'＃QV102'）。css（“display”，“none”） ; $（'＃QV103'）。css（“display”，“none”）;}）;代码运行良好，但这些不是我想要的，谢谢 – corting

这里呈现出片段，你的代码工作正常：

$(window).load(function(){ 
 
    debugger 
 
    $('#comp').ready(function() { 
 
    $('#QV101').css("display", "inline"); 
 
    $('#QV102').css("display", "none"); 
 
    $('#QV103').css("display", "none"); 
 
    }); 
 
    $('#comp').on('click', function(event) { 
 
    debugger 
 
    $('#QV101').css("display", "inline"); 
 
    $('#QV102').css("display", "none"); 
 
    $('#QV103').css("display", "none"); 
 
    }); 
 
    $('#mes').on('click', function(event) { 
 
    debugger 
 
    $('#QV101').css("display", "none"); 
 
    $('#QV102').css("display", "inline"); 
 
    $('#QV103').css("display", "none"); 
 

 
    }); 
 
    $('#hora').on('click', function(event) { 
 
    debugger 
 
    $('#QV102').css("display", "none"); 
 
    $('#QV101').css("display", "none"); 
 
    $('#QV103').css("display", "inline"); 
 

 
    }); 
 
    debugger 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="comp">comp</button> 
 
<button id="mes">mes</button> 
 
<button id="hora">hora</button> 
 
<div id="QV101">QV101</div> 
 
<div id="QV102">QV102</div> 
 
<div id="QV103">QV103</div> 
 

 
<script type="text/javascript"> 
 

 
</script>

来源

2016-06-10 09:07:33

嗨，谢谢你的回答，但你的代码和我的代码有什么区别？ – corting

什么都没有。你的代码正在工作。 –

但是当我尝试它不工作，这是extrange，Ÿ认为它可以是因为QV ...是一个Java脚本元素使qlik应用程序？谢谢 – corting

$('#QV101').addClass('show'); 
 
$('#QV101').siblings(':not(button)').addClass('hide') 
 

 

 

 
$('#comp').on('click', function(event) { 
 
    $('#QV101').siblings(':not(button)').removeClass('show'); 
 
    $('#QV101').addClass('show'); 
 
    $('#QV101').siblings(':not(button)').addClass('hide'); 
 
}); 
 
$('#mes').on('click', function(event) { 
 
    $('#QV102').siblings(':not(button)').removeClass('show'); 
 
    $('#QV102').addClass('show'); 
 
    $('#QV102').siblings(':not(button)').addClass('hide'); 
 
}); 
 
$('#hora').on('click', function(event) { 
 
    $('#QV103').siblings(':not(button)').removeClass('show'); 
 
    $('#QV103').addClass('show'); 
 
    $('#QV103').siblings(':not(button)').addClass('hide'); 
 

 
});

.hide { 
 
    display: none 
 
} 
 
.show { 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="QV101">1</div> 
 
<div id="QV102">2</div> 
 
<div id="QV103">3</div> 
 

 

 
<button id="comp">comp</button> 
 
<button id="mes">mes</button> 
 
<button id="hora">hora</button>

添加:not(button)排除按钮（也可以使用兄弟（DIV））
使用.siblings()来获取所有DIV。
添加/删除根据按钮的点击类

来源

2016-06-10 09:07:46 guradio

感谢您的回答 – corting

@corting现在在工作吗？ – guradio

我不会尝试你的答案，因为我找到了中间解决方案。但也谢谢你的失望 – corting

下面是我在评论上述方法。这将减少易于维护的代码行&。以下的jsfiddle链接给出：

更新的代码如下：

$(function(){ 

    $('#comp').ready(function() { 
    $('#QV101').css("display", "inline"); 
    $('#QV102').css("display", "none"); 
    $('#QV103').css("display", "none"); 
    }); 

    $('#comp').on('click', function(event) { 
    $('.toggleDiv').hide(); 
    $('#QV101').css("display", "inline");  
    }); 
    $('#mes').on('click', function(event) { 
    $('.toggleDiv').hide();  
    $('#QV102').css("display", "inline"); 
    }); 
    $('#hora').on('click', function(event) { 
    $('.toggleDiv').hide();  
    $('#QV103').css("display", "inline"); 
    }); 

});

Working Fiddle

来源

2016-06-10 09:19:59

嗨，谢谢，但它不工作在我的代码 – corting

请你让我知道为什么这种方法不是首选/不工作的原因？ –

因为我复制的代码，什么都没有发生，但我看，惠特切换是可能的 – corting

我解决这部分是代码

<script type="text/javascript"> 
$(window).load(function(){ 
debugger

问题

$('#QV101').css("display", "inline"); 
$('#QV102').css("display", "none"); 
$('#QV103').css("display", "none"); 

$('#comp').on('click', function(event) { 
debugger 
$('#QV101').css("display", "inline"); 
$('#QV102').css("display", "none"); 
$('#QV103').css("display", "none"); 
}); 
$('#mes').on('click', function(event) { 
debugger 
$('#QV101').css("display", "none"); 
$('#QV102').css("display", "inline"); 
$('#QV103').css("display", "none"); 

}); 
$('#hora').on('click', function(event) { 
debugger 
$('#QV102').css("display", "none"); 
$('#QV101').css("display", "none"); 
$('#QV103').css("display", "inline"); 

}); 
debugger 
}); 
    </script>

现在的问题是，qv是一个qlik图表，并且这并不显示第一次这个节目，当我稍后再滚动几次时。问题不就是代码的图表，它创造外应用Qlik，

感谢所有答案

来源

2016-06-10 09:45:19 corting

jQuery的变化显示CSS不能正常工作

回答

相关问题