Question

在这里，我试图将单击的下拉图标更改为父下拉列表。我使用了切换Jquery函数，但无法正确执行。帮我解决这个问题。到目前为止，这是我尝试过的：

$('.dropdown-item').click(function(){
  $(this).parent().parent().parent().find('.dropdown-toggle').html(($(this).text()));
});

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">


<li class="nav-item mx-auto dropdown" data-toggle="dropdown" (click)="toggleClick('cubes', cubes)">
  <a class="nav-link dropdown" data-toggle="dropdown" href="#" [ngClass]="{active: cubes}">
    <i class="fa fa-cubes defaultColor dropdown-toggle" data-toggle="dropdown">
    </i>
    <div class="dropdown-menu ">
      <div class="row">
        <div class="col">
          <i class="fa fa-arrow-up defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-down defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-right defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-left defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-right defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-left defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
      </div>
    </div>
  </a>
</li>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 1

在每个元素上添加一个onclick事件
从类字符串中查找/解析当前的图标
找到父级并从类字符串中解析其fa-icon
用新的和旧的去掉！：）

function changeParentIcon(element) {
  var self = this;
  var jElement = $(element);
  var newFa = getFirstFaClass(jElement);
  var jParent = jElement.parent().closest('a').children('i').first();
  var oldFa = getFirstFaClass(jParent);
  jParent.removeClass(oldFa);
  jParent.addClass(newFa);
};

function getFirstFaClass(jElement) {
  var css = jElement.attr('class');
  css = css.substr(css.indexOf('fa-'));
  css = css.split(' ')[0];
  return css;
};

$(() => {
  $('.dropdown-menu .dropdown-item').on('click', function () {
    changeParentIcon(this);
  });
});

.col .defaultColor {
  font-size: 30px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<li class="nav-item mx-auto dropdown" data-toggle="dropdown" (click)="toggleClick('cubes', cubes)">
  <a class="nav-link dropdown" data-toggle="dropdown" href="#" [ngClass]="{active: cubes}">
    <i class="fa fa-cubes defaultColor dropdown-toggle" data-toggle="dropdown">
    </i>
    <div class="dropdown-menu ">
      <div class="row">
        <div class="col">
          <i class="fa fa-arrow-up defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-down defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-right defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-left defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-right defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-left defaultColor dropdown-item"></i>
        </div>
      </div>
    </div>
  </a>
</li>

Answer 2

在这里尝试

$lastClass = 'fa-cubes';
    $('.dropdown-item').click(function () {
        $rootElement = $(this).parent().parent().parent().parent().find('.dropdown-toggle')[0];
        $(this.classList).each(function (index, item) {
            if (item.match('(^|\s)(fa\-[^\s]*)'))
            {
                console.log($rootElement);
                if ($($rootElement).hasClass($lastClass)) {
                    $($rootElement).removeClass($lastClass);
                }
                $lastClass = item;
                $($rootElement).addClass(item);

            }
        })
    })

将单击的导航栏下拉菜单的图标更改为父级

2 个答案: