试图理解功能构造

Question

我试图理解函数的构造，以便减少重复的代码。我所看到的所有代码片段都处理返回值，并希望有人可以阐明为什么它不起作用。

<div id = 'box1' style = 'background-color: green; height: 100px; width: 50px' >
</div>

var box =  $('#box1');


function pushCard(x){
    if(x.style.opacity == 0.5){
    x.style.opacity = 1;
}
else {
x.style.opacity = 0.5;
}

}

box.click(pushCard(box));

Answer 1

您不想在传递函数时调用它。您可以只传递函数，然后单击它即可传递事件。元素是事件target

var box = $('#box1');


function pushCard(event) {
  let x = event.target
  if (x.style.opacity == 0.5) {
    x.style.opacity = 1;
  } else {
    x.style.opacity = 0.5;
  }
}

box.click(pushCard);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box1' style='background-color: green; height: 100px; width: 50px'>
</div>

您也可以使用this获取被单击的对象：

var box = $('#box1');

function pushCard() {
  if (this.style.opacity == 0.5) {
    this.style.opacity = 1;
  } else {
    this.style.opacity = 0.5;
  }
}

box.click(pushCard);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box1' style='background-color: green; height: 100px; width: 50px'>
</div>