Question

我有一个类为“ boshkeDetails”的div，其中有一个类为“ detailsBoshkeColapse”的div，并且打开了“ boshkeDetails”的第一个div。我想为类“ boshkeDetails”的第一个div删除图标fa-plus，并且页面加载时以fa-min减小它。但是我的代码无法正常工作。如何解决？我将代码放在下面的链接中： https://codepen.io/elhambgh4/pen/QZyedY

           <div class="boshkeDetails">
    <div class="DetailsCategory" data-toggle="collapse" href="#boshkeDetails-1">
        <div class="text">
            <h4>item1.Name</h4>
            <div class="iconPlus iconPlusGray">
                <i class="fa fa-plus" id="icon"></i>
            </div>
        </div>
    </div>
    <div class="detailsBoshkeColapse collapse in" id="boshkeDetails-1">
        <div class="content-boshkeDetails">
            <p>
               item1.Content
            </p>
        </div>
    </div>
</div>
    <div class="boshkeDetails">
    <div class="DetailsCategory" data-toggle="collapse" href="#boshkeDetails-2">
        <div class="text">
            <h4>item2.Name</h4>
            <div class="iconPlus iconPlusGray">
                <i class="fa fa-plus" id="icon"></i>
            </div>
        </div>
    </div>
    <div class="detailsBoshkeColapse collapse" id="boshkeDetails-2">
        <div class="content-boshkeDetails">
            <p>
               item2.Content
            </p>
        </div>
    </div>
</div>

jquery：

         $(document).ready(function () {
if ($(".detailsBoshkeColapse").hasClass('in')) {
    var icon = $(this)
    icon.prev(".DetailsCategory").find('.iconPlus i').removeClass('fa-plus').addClass('fa-minus');   
}

$('.DetailsCategory').click(function () {
    if ($(this).next().hasClass('in')) {

        $(this).find('.text .iconPlus i').toggleClass('fa-plus').toggleClass('fa-minus');
        $(this).find('.text .iconPlus').toggleClass('iconPlusRed').toggleClass('iconPlusGray');

    } else {
        $(this).find('.text .iconPlus i').toggleClass('fa-minus').toggleClass('fa-plus');
        $(this).find('.text .iconPlus').toggleClass('iconPlusGray').toggleClass('iconPlusRed');
    }
   });
  });

Answer 1

更改

var icon = $(this)

到

var icon = $('.detailsBoshkeColapse.in')

那您的所有代码都能正常工作
注意：您在事件（单击，更改，悬停，焦点等）之外使用此代码，因此在代码jQuery中使用（this）指的是在事件之外使用的窗口对象

Answer 2

尝试使用此代码：

const onload = () => {
  const icon = document.querySelector(".boshkeDetails .fa-plus");

  if (icon) {
    icon.classList.remove("fa-plus");
    icon.classList.add("fa-minus");
  }
}

window.addEventListener("load", onload)

它正在尝试使用选择器".boshkeDetails .fa-plus"查找第一个元素并切换其类。

Answer 3

您很近但还不在那里。试试这个：

$(document).ready(function () {

    $('.DetailsCategory').click(function () {
        if ($(this).next().hasClass('in')) {
            $(this).find('.text .iconPlus i').toggleClass('fa-plus').toggleClass('fa-minus');
            $(this).find('.text .iconPlus').toggleClass('iconPlusRed').toggleClass('iconPlusGray');
        } else {
            $(this).find('.text .iconPlus i').toggleClass('fa-minus').toggleClass('fa-plus');
            $(this).find('.text .iconPlus').toggleClass('iconPlusGray').toggleClass('iconPlusRed');
        }
    });

    $(".detailsBoshkeColapse.in").prev('.DetailsCategory').trigger('click');  
});

行

$(".detailsBoshkeColapse.in").prev('.DetailsCategory').trigger('click');

查找元素并触发点击。如果您在'in'类中包含多个元素，请使用jquery .first()过滤器。

加载页面时，如何使用类“ boshkeDetails”删除第一格的带fa-的图标fa-plus

3 个答案: