单击封闭div时更改锚元素的颜色

Question

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

$(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元素，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

.functionHyperlink { 
  color: #000;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

一种可能性是使用angular.element（）和css选择器

angular.element('.functionHyperlink').css('color', '#fff');

Answer 3

如果我理解正确，您只想在点击时实现颜色变化。你可以尝试使用这样的纯CSS。

.settings-list-container:active .functionHyperlink {
    color: white;
}

或者您可以通过jQuery并在单击div时添加一个类：

$(document).ready(function() {
    "use strict";

    $('.settings-list-container').each(function() {
        $(this).bind('mousedown', function() {
            $(this).find('.functionHyperlink').addClass('inverted');
        }).bind('mouseup', function() {
            $(this).find('.functionHyperlink').removeClass('inverted');
        });
    });
});

.functionHyperlink.inverted {
    color: white;
}

如果您希望元素保持反转，请改用以下jQuery。

$(document).ready(function() {
    "use strict";

    $('.settings-list-container').each(function() {
        $(this).click(function(e) {
            e.preventDefault();
            $(this).find('.functionHyperlink').toggleClass('inverted');
        });
    });
});