jQuery的變化顯示CSS不能正常工作

Question

我有一個代碼

<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> 

謝謝

Answer 1

這裏呈現出片段，你的代碼工作正常：

$(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>

Answer 2

$('#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>

1. 添加:not(button)排除按鈕（也可以使用兄弟（DIV））
2. 使用.siblings()來獲取所有DIV。
3. 添加/刪除根據按鈕的點擊類

Answer 3

下面是我在評論上述方法。這將減少易於維護的代碼行&。以下的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

Answer 4

我解決這部分是代碼

<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，

感謝所有答案