Question

我有一个马赛克（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');

Answer 1

我已经获得了解决方案，所以我在这里与您分享：

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

我不得不选择孩子们的孩子们的孩子......不是很漂亮＆＃34;解决方案，但它确实做到了。感谢您的时间mplungjan。

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

1 个答案: