javascript—管理元素样式的更改有没有更简单的方法？

qyswt5oh  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(190)

我知道我在用mjs代码重复我自己，它并不枯燥，尽管我不知道如何以更简洁的方式编写它。
为了更改单击事件中元素的样式，我遵循创建包含更改的类的路径，然后删除默认类并为被单击的元素添加新类，然后删除新类并在用户单击该元素时再次添加默认类。
每件事都能100%工作，尽管我很确定有一种更简单的方法可以通过使用某种循环来实现这一点，而且我也不确定在更改之前是否需要所有用于保存对象元素值的常量-也许有一种更简单的方法来访问这些元素的dom(第3.2步）。
我只学了一个月的网络开发，所以我不知道我不知道什么。
如果你有更简单的方法，你能看一下并告诉我吗？
我有6个div，它们共享列、颜色和内容的类。它们都如下所示：

  1. <div class="portfolio_columns">
  2.      <div class="colorful_box box1"></div>
  3.      <div class='portfolio_piece piece1'>
  4.      </div>
  5. </div>
  7. <div class="portfolio_columns">
  8.      <div class="colorful_box box2"></div>
  9.      <div class='portfolio_piece piece2'>
  10.      </div>
  11. </div>
  13. <div class="portfolio_columns">
  14.      <div class="colorful_box box3"></div>
  15.      <div class='portfolio_piece piece3'>
  16.      </div>
  17. </div>
  19. <div class="portfolio_columns">
  20.      <div class="colorful_box box4"></div>
  21.      <div class='portfolio_piece piece4'>
  22.      </div>
  23. </div>
  25. <div class="portfolio_columns">
  26.      <div class="colorful_box box5"></div>
  27.      <div class='portfolio_piece piece5'>
  28.      </div>
  29. </div>
  31. <div class="portfolio_columns">
  32.      <div class="colorful_box box6"></div>
  33.      <div class='portfolio_piece piece6'>
  34.      </div>
  35. </div>

然后我创建javascript，这样我就可以监听点击。
我遵循以下步骤：
步骤1.我将id添加到html元素中：

  1. <div id="pc1" class="portfolio_columns">
  2.      <div id="box_1" class="colorful_box box1"></div>
  3.      <div id="piece_1" class='portfolio_piece piece1'>
  4.      </div>
  5. </div>
  7. <div id="pc2" class="portfolio_columns">
  8.      <div id="box_2" class="colorful_box box1"></div>
  9.      <div id="piece_2" class='portfolio_piece piece1'>
  10.      </div>
  11. </div>
  13. <div id="pc3" class="portfolio_columns">
  14.      <div id="box_3" class="colorful_box box1"></div>
  15.      <div id="piece_3" class='portfolio_piece piece1'>
  16.      </div>
  17. </div>
  19. <div id="pc4" class="portfolio_columns">
  20.      <div id="box_4" class="colorful_box box1"></div>
  21.      <div id="piece_4" class='portfolio_piece piece1'>
  22.      </div>
  23. </div>
  25. <div id="pc5" class="portfolio_columns">
  26.      <div id="box_5" class="colorful_box box1"></div>
  27.      <div id="piece_5" class='portfolio_piece piece1'>
  28.      </div>
  29. </div>
  31. <div id="pc6" class="portfolio_columns">
  32.      <div id="box_6" class="colorful_box box1"></div>
  33.      <div id="piece_6" class='portfolio_piece piece1'>
  34.      </div>
  35. </div>

步骤2.我为我的div类和css中的新类创建了一些默认样式，其中包含鼠标事件的样式更改：

  1. .portfolio_columns {
  3. }
  5. .colorful_box {
  7. }
  9. .portfolio_piece {
  11. }
  13. .pcc {
  15. }
  17. .ppc {
  19. }
  21. .cbc {
  23. }

步骤3.1。在js中，我创建了一个常量，在鼠标事件后对元素对象进行更改之前保存元素对象：

  1. const pcc1 = document.getElementById('pc1'),
  2.     pcc2 = document.getElementById('pc2'),
  3.     pcc3 = document.getElementById('pc3'),
  4.     pcc4 = document.getElementById('pc4'),
  5.     pcc5 = document.getElementById('pc5'),
  6.     pcc6 = document.getElementById('pc6'),
  7.     cbc1 = document.getElementById('box_1'),
  8.     cbc2 = document.getElementById('box_2'),
  9.     cbc3 = document.getElementById('box_3'),
  10.     cbc4 = document.getElementById('box_4'),
  11.     cbc5 = document.getElementById('box_5'),
  12.     cbc6 = document.getElementById('box_6'),
  13.     ppc1 = document.getElementById('piece_1'),
  14.     ppc2 = document.getElementById('piece_2'),
  15.     ppc3 = document.getElementById('piece_3'),
  16.     ppc4 = document.getElementById('piece_4'),
  17.     ppc5 = document.getElementById('piece_5'),
  18.     ppc6 = document.getElementById('piece_6');

步骤3.2。我创建了一个名为cnt的全局变量，并为单击文档添加了一个eventlistener。在eventlistener中，我使用if语句来标识单击的内容，如果它是我正在侦听的内容，那么我会相应地添加新类并删除元素对象的默认类。一旦用户单击所选元素，我将删除新类并恢复默认类：

  1. let cnt = 0;
  3. document.addEventListener('click', function(e) {
  5.     if (e.target.classList.contains('box1')) {
  6.         cnt = 1;
  7.         pcc1.classList.remove('portfolio_columns');
  8.         pcc1.classList.add('pcc');
  9.         cbc1.classList.remove('colorful_box');
  10.         cbc1.classList.add('cbc');
  11.         ppc1.classList.remove('portfolio_piece');
  12.         ppc1.classList.add('ppc');
  13.     }
  14.     else
  16.     if (e.target.classList.contains('box2')) {
  17.         cnt = 2;
  18.         pcc2.classList.remove('portfolio_columns');
  19.         pcc2.classList.add('pcc');
  20.         cbc2.classList.remove('colorful_box');
  21.         cbc2.classList.add('cbc');
  22.         ppc2.classList.remove('portfolio_piece');
  23.         ppc2.classList.add('ppc');
  24.     }
  25.     else
  27.     if (e.target.classList.contains('box3')) {
  28.         cnt = 3;
  29.         pcc3.classList.remove('portfolio_columns');
  30.         pcc3.classList.add('pcc');
  31.         cbc3.classList.remove('colorful_box');
  32.         cbc3.classList.add('cbc');
  33.         ppc3.classList.remove('portfolio_piece');
  34.         ppc3.classList.add('ppc');
  35.     }
  36.     else
  38.     if (e.target.classList.contains('box4')) {
  39.         cnt = 4;
  40.         pcc4.classList.remove('portfolio_columns');
  41.         pcc4.classList.add('pcc');
  42.         cbc4.classList.remove('colorful_box');
  43.         cbc4.classList.add('cbc');
  44.         ppc4.classList.remove('portfolio_piece');
  45.         ppc4.classList.add('ppc');
  46.     }
  47.     else
  49.     if (e.target.classList.contains('box5')) {
  50.         cnt = 5;
  51.         pcc5.classList.remove('portfolio_columns');
  52.         pcc5.classList.add('pcc');
  53.         cbc5.classList.remove('colorful_box');
  54.         cbc5.classList.add('cbc');
  55.         ppc5.classList.remove('portfolio_piece');
  56.         ppc5.classList.add('ppc');
  57.     }
  58.     else
  60.     if (e.target.classList.contains('box6')) {
  61.         cnt = 6;
  62.         pcc6.classList.remove('portfolio_columns');
  63.         pcc6.classList.add('pcc');
  64.         cbc6.classList.remove('colorful_box');
  65.         cbc6.classList.add('cbc');
  66.         ppc6.classList.remove('portfolio_piece');
  67.         ppc6.classList.add('ppc');
  68.     }
  69.     else 
  71.     if (cnt > 0) {
  73.         switch (cnt) {
  74.             case 1: {
  75.                 pcc1.classList.remove('pcc');
  76.                 cbc1.classList.remove('cbc');
  77.                 ppc1.classList.remove('ppc');
  78.                 pcc1.classList.add('portfolio_columns');
  79.                 cbc1.classList.add('colorful_box');
  80.                 ppc1.classList.add('portfolio_piece');
  81.             }
  82.             break;
  83.             case 2: {
  84.                 pcc2.classList.remove('pcc');
  85.                 cbc2.classList.remove('cbc');
  86.                 ppc2.classList.remove('ppc');
  87.                 pcc2.classList.add('portfolio_columns');
  88.                 cbc2.classList.add('colorful_box');
  89.                 ppc2.classList.add('portfolio_piece');
  90.             }
  91.             break;
  92.             case 3: {
  93.                 pcc3.classList.remove('pcc');
  94.                 cbc3.classList.remove('cbc');
  95.                 ppc3.classList.remove('ppc');
  96.                 pcc3.classList.add('portfolio_columns');
  97.                 cbc3.classList.add('colorful_box');
  98.                 ppc3.classList.add('portfolio_piece');
  99.             }
  100.             break;
  101.             case 4: {
  102.                 pcc4.classList.remove('pcc');
  103.                 cbc4.classList.remove('cbc');
  104.                 ppc4.classList.remove('ppc');
  105.                 pcc4.classList.add('portfolio_columns');
  106.                 cbc4.classList.add('colorful_box');
  107.                 ppc4.classList.add('portfolio_piece');
  108.             }
  109.             break;
  110.             case 5: {
  111.                 pcc5.classList.remove('pcc');
  112.                 cbc5.classList.remove('cbc');
  113.                 ppc5.classList.remove('ppc');
  114.                 pcc5.classList.add('portfolio_columns');
  115.                 cbc5.classList.add('colorful_box');
  116.                 ppc5.classList.add('portfolio_piece');
  117.             }
  118.             case 6: {
  119.                 pcc6.classList.remove('pcc');
  120.                 cbc6.classList.remove('cbc');
  121.                 ppc6.classList.remove('ppc');
  122.                 pcc6.classList.add('portfolio_columns');
  123.                 cbc6.classList.add('colorful_box');
  124.                 ppc6.classList.add('portfolio_piece');
  125.             }
  126.         }
  127.     }
  129.     });
JavaScriptClass

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com