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不能正常工作

回答

相關問題