单击另一个div中的按钮时，如何为div添加CSS样式

Question

I'am trying to add some css styles for a div text, when I clicked a button in another div

here is my html code

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


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

my js code

.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');
      });

    }
  }
});

my problem is when I clicked on button in one div css styles has to apply for the another div using directive, I tried something like above but didn't worked.

Thanks in advance

Answer 1

elem will refer to the button . So elem.find('#target') will look for #target inside elem

You can do like this

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

Answer 2

if your element id is unique and non changed then you can simplify it as below

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

elem.find will find all div with id contains 'target', try to use unique id's for all div changes. It will help you.