切換jquery不工作

我有一個jQuery的切換問題，它不切換當前div，而是切換當前切換的下一個div，當我嘗試更改切換div的類時，它不起作用在所有。任何人都可以幫助我嗎？
P.S：我在切換SITES模塊時，在class =「clsDashRegion_sitesBloc」中封裝了它的內容（背景：黃色），當我把這個類放入我的JS時它不起作用。切換jquery不工作

這裏是我的代碼

(function zipContentBloc($) { 
 
\t \t $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() { 
 
\t \t \t // Toggle the panel next to the item that was clicked 
 
\t \t \t $(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle(); 
 
\t \t }); 
 
\t })(jQuery);

/* Plus and Minus Signs */ 
 
.clsDashRegion_zipIndicator { 
 
\t position: absolute; 
 
\t top: 6%; 
 
    right: 0.5rem; 
 
\t transform: translateY(-50%); 
 
\t font-size: 1.8rem; 
 
} 
 

 
/* Plus */ 
 
.clsDashRegion_zipIndicator::after { 
 
\t content: '\002B'; 
 
} 
 

 
/* Minus */ 
 
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after { 
 
\t content: '\002D'; 
 
\t font-size: 3rem; 
 
} 
 

 
.clsDashRegion_levelOne { 
 
\t width: 25rem; 
 
\t /* height: 100%; */ 
 
\t background: #3c4647; 
 
\t position: relative; 
 
} 
 
.clsDashRegion_catgBloc { 
 
\t position: relative; 
 
    left: 2%; 
 
\t width: calc(100% - 1rem); 
 
\t height: 12.6rem; 
 
} 
 
.clsDashRegion_catgBlocBackground { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: rgba(255,255,255,0.9); 
 
    opacity: 0.6; 
 
} 
 
.clsDashRegion_catgHeaderBloc { 
 
\t height: 2.5rem; 
 
\t background: aqua; 
 
} 
 
.clsDashRegion_catgLogoBloc { 
 
\t width: 2.5rem; 
 
\t height: 2.5rem; 
 
\t float: left; 
 
} 
 
.clsDashRegion_catgTitleBloc { 
 
\t float: left; 
 
\t width: calc(100% - 5.5rem); 
 
\t height: 2.5rem; 
 
\t color: #000000; 
 
\t font-weight: bold; 
 
\t font-size: 1.4rem; 
 
\t text-align: center; 
 
\t line-height: 2.5rem; 
 
} 
 
.clsDashRegion_catgReduceBloc { 
 
\t float: right; 
 
\t width: 3rem; 
 
\t height: 2.5rem; 
 
\t text-align: center; 
 
\t line-height: 2.5rem; 
 
} 
 
.clsDashRegion_catgTNTFMBloc { 
 
\t /* position: absolute; */ 
 
\t /*float: none;*/ 
 
\t display: block; 
 
    float: right; 
 
\t width: 10rem; 
 
\t height: 2.5rem; 
 
} 
 
.clsDashRegion_catgTitleTNTFM { 
 
\t float: left; 
 
\t width: 5rem; 
 
\t height: 2.5rem; 
 
\t color: #000000; 
 
\t text-align: center; 
 
    font-weight: bold; 
 
} 
 
.clsDashRegion_catgInfoBloc { 
 
\t position: relative; 
 
\t float: right; 
 
\t display: block; 
 
    width: 100%; 
 
\t height: 2.5rem; 
 
} 
 
.clsDashRegion_infoTitleBloc { 
 
\t float: left; 
 
\t width: 50%; 
 
    height: 2.5rem; 
 
\t font-weight: bold; 
 
\t margin-left: 1rem; 
 
} 
 
.clsDashRegion_infoValueBloc { 
 
\t float: right; 
 
\t width: 5rem; 
 
\t height: 2.5rem; 
 
\t text-align: center; 
 
} 
 
.clsDashRegion_wrapbuttonBlocTicket { 
 
\t position: relative; 
 
    float: left; 
 
    display: block; 
 
    width: 100%; 
 
\t height: 4rem; 
 
} 
 
.clsDashRegion_wrapbuttonBlocGE { 
 
\t position: relative; 
 
    float: left; 
 
    display: block; 
 
    width: 100%; 
 
\t height: 5rem; 
 
} 
 
.clsDashRegion_catgbuttonBloc { 
 
\t position: relative; 
 
\t float: left; 
 
    top: 1rem; 
 
    text-align: center; 
 
} 
 
.clsDashRegion_buttonValue { 
 
\t width: 5rem; 
 
    height: 1.5rem; 
 
\t margin-left: 2rem; 
 
    border: 1px solid; 
 
    line-height: 1.4rem; 
 
    background: chartreuse; 
 
\t border-style: groove; 
 
} 
 
.clsDashRegion_buttonTitle { 
 
\t margin-left: 1.5rem; 
 
    line-height: 1.4rem; 
 
\t font-weight: bold; 
 
} 
 
.clsDashRegion_catgInfoBlocSite { 
 
\t position: relative; 
 
\t float: right; 
 
\t display: block; 
 
    width: 100%; 
 
\t top: 0.5rem; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
} 
 
.clsDashRegion_valueTech { 
 
\t float: left; 
 
\t width: calc(100% - 4rem); 
 
\t margin-bottom: 0.5rem; 
 
\t border-style: groove; 
 
    letter-spacing: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clsSubPageArea"> 
 
\t \t <div class="clsDashRegion_levelOne"> 
 
\t \t \t <div class="clsDashRegion_catgBloc"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">ALARMES</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgTNTFMBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">TNT</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">FM</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Critique</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:8em;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">TICKETS</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_wrapbuttonBlocTicket"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">En cours</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:20rem;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">SITES</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_zipIndicator"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTNTFMBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">TNT</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">FM</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">-3dB</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Rx</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Perte HF</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Décrochage HS</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_wrapbuttonBlocGE"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgInfoBlocSite">GE Actif</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V1</div> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">En cours</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V2</div> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">- 10 jrs</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:18rem;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t

來源

2017-07-25 Zee

可能我建議使用的ID，而不是類使用的JavaScript – Remi

@TheRickest如你所說的ID，但史迪威同樣的問題我試過了，我認爲這個問題是在我的代碼..但無法弄清楚 – Zee

這只是一般的生活建議，id的上課爲js在哪裏你可以幫助它只是解決各種頭痛 – Remi

是因爲你使用額外的選擇與on('click', '.clsDashRegion_catgBloc',...

試試這個：

$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) { 
     // Toggle the panel next to the item that was clicked 
     $(event.target).toggleClass('clsDashRegion_catgBloc--active').next().toggle(); 
    });

$（this）= $（'。clsDashRegion_levelOne'）; - 您添加的區塊.on();

$（event.target）= $（'。clsDashRegion_catgBloc'）; - 塊而這正是點擊

小提琴例如：https://jsfiddle.net/z4tdxmbk/ 檢查this也

來源

2017-07-25 09:57:40 Constantine

謝謝你的答案，但仍然沒有工作..它給我這個未捕獲的SyntaxError：意外的標識符 – Zee

@Zinebs檢查示例。可能會幫助理解會發生什麼 – Constantine

我試過你的答案，但沒有將它放入jquery函數中......它確實有效，但不正確。你試過看看結果嗎？ – Zee

切換jquery不工作

回答

相關問題