我有一个马赛克（div #mosaique），其中包含不同的div。
我想要的是当我点击我的一个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');
答案 0 :(得分：1)
我已经获得了解决方案，所以我在这里与您分享：
$('#mosaique > div > div > div').not($('#'+target)).css('opacity', '0.5');
我不得不选择孩子们的孩子们的孩子......不是很漂亮＆＃34;解决方案，但它确实做到了。 感谢您的时间mplungjan。