使用JavaScript向标记添加额外的类

8ulbf1ek 于 2023-02-15 发布在 Java

关注(0)|答案(2)|浏览(116)

我计划每当用户单击图标时都显示标题，通过再次单击，除了隐藏标题外，背景颜色也会改变，以便用户知道他之前单击了哪个框。
为此，我编写了一个脚本代码，可以很好地显示和隐藏标题，但背景颜色不会改变。
总之：我希望在隐藏标题时，将. background类添加到. box_mini类中。
我曾经使用这段代码向前一个类添加一个新类：

$(document).ready(function () {
    $('.box_mini').click(function () {
        $(this).toggleClass('background');
    });
});

但我不知道该怎么办？
我的代码如下：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

JavaScript

来源：https://stackoverflow.com/questions/75435262/add-an-extra-class-to-a-tag-with-javascript

2条答案

按热度按时间

kxkpmulp1#

我认为你把jQuery和原生js混得太多了。
为什么不像这样坚持使用jQuery呢？
编辑，我将设置cursor:pointer;为您的.bi类，以突出显示可点击的上下文。

$('body').on('click','.bi-play-circle-fill',function(){
  $(this).next('.title_box').show();
  $(this).removeClass('bi-play-circle-fill').addClass('bi-power');
  $(this).parent().addClass('background');
});

$('body').on('click','.bi-power',function(){
  $(this).next('.title_box').hide();
  $(this).removeClass('bi-power').addClass('bi-play-circle-fill');
  $(this).parent().removeClass('background');
});

.box_main {
        display: flex;
        justify-content: space-around;
    }

    .box_mini {
        width: 250px;
        height: 200px;
        background: #5ec7ff;
        box-shadow: 0 0 4px #000;
        transition: all 0.5s ease;
    }

    .box_icon {
        font-size: 25px;
        margin: 10px 45% 6px;
        color: #7f7f7f;
    }

    .title_box {
        font-size: 45px;
        margin: 25px 0;
        color: #f9ff4d;
        text-align: center;
        display: none;
    }

    .background{
        background: #c9e955;
        transition: all 0.5s ease;
    }
    
    .bi{
      cursor: pointer;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<section class="box_main">
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

</section>

赞(0）回复(0）举报 2023-02-15

2uluyalo2#

我试着让它和你之前的非常相似。看起来你没有得到父类**.box_mini**来改变背景颜色。

let mini = document.querySelector(".box_mini");

document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".title_box");
let parent = $(this).parent();
if (this.classList.contains("bi-play-circle-fill")) {
    this.classList = "bi bi-power box_icon";
    excerpt.style.display = "block";
    parent.toggleClass('background');
} else {
    this.classList = "bi bi-play-circle-fill box_icon";
    excerpt.style.display = "none"
    parent.toggleClass('background');
  }

  });
});

赞(0）回复(0）举报 2023-02-15

我来回答

使用JavaScript向标记添加额外的类

2条答案

相关问题

热门标签

最新问答