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

问题描述 投票:-1回答:3

我是新来的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();
});
javascript jquery
3个回答
4
投票

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

$('#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在默认情况下,例如没有影响。


0
投票

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


0
投票

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

推荐问答