javascript - 单击封闭的 div 时更改 anchor 元素的颜色

Question

我需要在单击封闭的 div 时将 anchor 元素的颜色从黑色更改为白色。代码:

$(document).ready(function() {
  $(".settings-list-container").click(function() {
    $(".functionHyperlink").css("background-color", "red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
  <div id="settings-list">
    <div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
      <a href="" class="functionHyperlink" target="_self">{{element.caption}}&nbsp;</a>
    </div>
  </div>
  <div id="settings-list-content" ng-include="tabV.view">

  </div>
</div>

Answer 1

为此，您可以使用 toggleClass() 添加/删除应用于 .settings-list-container 元素的预定义 CSS 规则。然后可以设置此类来影响子 .functionHyperlink 元素，如下所示:

$(document).ready(function() {
  $(".settings-list-container").click(function() {
    $(this).toggleClass('active');
  });
});

.functionHyperlink { 
  color: #000;
}

.settings-list-container.active .functionHyperlink {
  background-color: #F00;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="settings-container" ng-controller="settingController">
  <div id="settings-list">
    <div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
      <a href="" class="functionHyperlink" target="_self">{{element.caption}}&nbsp;</a>
    </div>
  </div>
  <div id="settings-list-content" ng-include="tabV.view"></div>
</div>

如果您只想添加一次颜色，请将toggleClass() 更改为addClass()。