试图选择除一个以外的所有-not（）jQuery Selector

Question

我有一个包含不同div的镶嵌图（div #mosaique）。

我想要的是当我单击一个div时，例如#langages或#libraries等...，另一个div变得不透明，并且所选div的大小发生了变化（该部分效果很好，请参阅开关部分）。

我使用JQuery通过not（）选择器执行此操作，但是到目前为止，每次我单击div时，整个div #mosaique都变得不透明。

 $('#mosaique').on('click', function(e) { //get the id of the element that has been clicked on var target = $(e.target).closest('div').attr('id'); //HERE THE CODE WHERE I SELECT ALL DIV FROM #MOSAIQUE EXCEPT TARGET switch (target) { case 'langages': $('.langText').css('display', 'block'); $('#langages').css('position', 'absolute'); $('#langages').css('z-index', '9999'); $('#langages').animate({ width: "1000px", height: "1000px", top: "250%", left: '70%' }, 'slow'); break; case 'librairies': $('#librairies').css('position', 'absolute'); $('#librairies').css('z-index', '9999'); $('#librairies').animate({ width: "1000px", height: "1000px", top: "250%", left: '-30%' }, 'slow'); break; case 'cms': $('#cms').css('position', 'absolute'); $('#cms').css('z-index', '9999'); $('#cms').animate({ width: "1000px", height: "1000px", top: "250%", right: '77%' }, 'slow'); break; case 'framework': $('#framework').css('position', 'absolute'); $('#framework').css('z-index', '9999'); $('#framework').animate({ width: "1000px", height: "1000px", top: "-470%", left: "70%", }, 'slow'); break; case 'techno': $('#techno').css('position', 'absolute'); $('#techno').css('z-index', '9999'); $('#techno').animate({ width: "1000px", height: "1000px", top: "-470%", right: '-24%' }, 'slow'); break; case 'conception': $('#conception').css('position', 'absolute'); $('#conception').css('z-index', '9999'); $('#conception').animate({ width: "1000px", height: "1000px", top: "-470%", left: '-130%' }, 'slow'); break; case 'environnement': $('#environnement').css('position', 'absolute'); $('#environnement').css('z-index', '9999'); $('#environnement').animate({ width: "1000px", height: "1000px", top: "-1200%", left: "47%", }, 'slow'); break; case 'tools': $('#tools').css('position', 'absolute'); $('#tools').css('z-index', '9999'); $('#tools').animate({ width: "1000px", height: "1000px", top: "-1200%", right: '50%' }, 'slow'); break; default: $(target).removeAttr('style'); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mosaique"> <div class="row langLibCMS"> <div class="col-sm-4"> <h3 id="lang" class="bubbleTitle">Langages</h3> <div id="langages" class="bubble"> <h1 class="langText">Langages appris via la formation Développeur Logiciel. N'hésitez pas à consulter mes <a href="#">réalisations</a> pour leur mise en pratique</h1> <img src="../img/html2.png" id="html2" alt="html" /> <img src="../img/css2.png" id="css2" alt="css" /> <img src="../img/javascript2.png" id="javascript2" alt="javascript" /> <img src="../img/android2.png" id="android2" alt="android" /> <img src="../img/php2.png" id="php2" alt="html" /> <img src="../img/mysql2.png" id="mysql2" alt="css" /> <img src="../img/java2.png" id="java2" alt="javascript" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Librairies</h3> <div id="librairies" class="bubble"> <img src="../img/bootstrap.png" id="bootstrap" alt="bootstrap" /> <img src="../img/materialDesign.png" id="materialDesign" alt="materialDesign" /> <img src="../img/jquery.png" id="jquery" alt="jquery" /> <img src="../img/pear.png" id="pear" alt="pear" /> <img src="../img/phpseclib.png" id="phpseclib" alt="phpseclib" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">CMS</h3> <div id="cms" class="bubble"> <img src="../img/wordpress.jpg" id="wordpress" alt="wordpress" /> <img src="../img/prestashop.png" id="prestashop" alt="prestashop" /> </div> </div> </div> <!-- row langLibCMS --> <div class="row frameTechConcep"> <div class="col-sm-4"> <h3 class="bubbleTitle">Framework</h3> <div id="framework" class="bubble"> <img src="../img/sf.png" id="symfony" alt="symfony" /> <p>Framework Symfony</p> <p>Utilisé dans le cadre d'un projet personnel (cf réalisation).</p> <p>Certificat de réussite OpenClassroom obtenu</p> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Technologies</h3> <div id="techno" class="bubble"> <img src="../img/ajax.png" id="ajax" alt="ajax" /> <img src="../img/webrtc.png" id="webrtc" alt="webrtc" /> <img src="../img/ionic.png" id="ionic" alt="ionic" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Conception</h3> <div id="conception" class="bubble"> <img src="../img/uml.png" id="uml" alt="uml" /> <img src="../img/jmerise.png" id="merise" alt="merise" /> </div> </div> </div> <!-- row --> <div class="row env"> <div class="col-sm-6"> <h3 class="bubbleTitle">Environnement</h3> <div id="environnement" class="bubble"> <img src="../img/linux.png" id="linux" alt="linux" /> <img src="../img/ms.png" id="microsoft" alt="microsoft" /> </div> </div> <div class="col-sm-6"> <h3 class="bubbleTitle">Autres outils</h3> <div id="tools" class="bubble"> <img src="../img/mysqlworkbench.png" id="mysqlworkbench" alt="mysqlworkbench" /> <img src="../img/lamp.png" id="lamp" alt="lamp" /> <img src="../img/wamp.jpg" id="wamp" alt="wamp" /> <img src="../img/netbeans.png" id="netbeans" alt="netbeans" /> <img src="../img/eclipse.png" id="eclipse" alt="eclipse" /> <img src="../img/putty.jpg" id="putty" alt="putty" /> <img src="../img/virtualbox.jpg" id="virtualbox" alt="virtualbox" /> </div> </div> </div> </div> <!-- div mosaique--> 

这是我尝试过的解决方案：

    $('div#mosaique > div').not($(#target)).css('opacity', '0.5');
    $('#mosaique div:not(#target)').css('opacity', '0.5'); 
    $('div #mosaique:not(#target)').css('opacity', '0.5');
    $('#mosaique').children().not($('#'+target)).css('opacity', '0.5');

Answer 1

我已经得到了解决方案，因此在这里与您分享：

$('#mosaique > div > div > div').not($('#'+target)).css('opacity', '0.5');

我必须从div的孩子中选择孩子的孩子。这不是一个非常“美丽”的解决方案，但确实可以做到。 感谢您的宝贵时间。