使用JavaScript上点击更新元素的CSS

Question

我是新来的JavaScript和必须使用不同的选项的功能，但我不知道如何使它发挥作用。

function changecolor(){
  $(this).css('background-color', 'white');
  $(this).css('border-top', '0.1px solid #8c8a8a');
  $(this).css('border-right', '0.1px solid #8c8a8a');
}

我想，每一个我点击选项时我激活功能changecolor

 $('#op1').on('click', function(e){
  e.preventDefault();
  changecolor();
});

Answer 1

您需要引用事件的目标是你在该实例点击的元素：

$('#op1').on('click', function(e){
  changecolor(e.target);
});

function changecolor(elem){
  $(elem).css('background-color', 'red');
  $(elem).css('border-top', '0.1px solid #8c8a8a');
  $(elem).css('border-right', '0.1px solid #8c8a8a');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="op1" style="width: 100px; height: 100px; border: 1px solid black;"></div>

此外，您也不必包括e.preventDefault();如果你想阻止没有默认的行为：如单击一个div在默认情况下，例如没有影响。

Answer 2

您正在呼吁点击一个功能，但点击“本”指的是功能，而不是元素。通过电子作为参数的功能和使用e.currentTarget或只是PAS的这个对象添加到您的功能。

Answer 3

在this功能changecolor关键字引用当前范围不是元素，您必须将元素从事件处理函数传递，就像这样：

function changecolor(element){
  $(element).css('background-color', 'white');
  $(element).css('border-top', '0.1px solid #8c8a8a');
  $(element).css('border-right', '0.1px solid #8c8a8a');
}
 $('#op1').on('click', function(e){
  e.preventDefault();
  changecolor(this);
});