Question

我正在尝试为div文本添加一些css样式，当我点击另一个div中的按钮时

这是我的HTML代码

<div class="row" id="target">
  <h2>{{txt}} </h2>
</div>


<div class="row">
  <button my-dir>Click Me</button>
</div>

我的js代码

.directive('myDir', function () {
  return {
    restrict: 'A',

    link: function (scope, elem, attr) {
      console.log(elem); 
      elem.bind('click', function (e) {
        console.log("coming");
        elem.find('#target').css({
          backgroundColor: 'red'
        })    

        // angular.element(e.target).siblings('#target').addClass('clr');
      });

    }
  }
});

我的问题是，当我点击一个div css样式中的按钮必须申请另一个div using指令时，我尝试了类似上面的内容但是没有用。

提前致谢

Answer 1

elem会引用button。因此elem.find('#target')会在#target

中寻找elem

你可以这样做

elem.bind('click', function (e) {
        $('body').find('#target').css({
          backgroundColor: 'red'
        })    
});

Answer 2

如果您的元素ID是唯一且未更改，那么您可以将其简化为

 elem.bind('click', function () {
         $('#target').css('backgroundColor','red');
 });

elem.find将找到id为'target'的所有div，尝试对所有div更改使用唯一ID。它会对你有所帮助。

当我点击另一个div中的按钮时，如何为div添加css样式

2 个答案: