更改单击时输入的值不起作用

Question

我的视图中有箭头按钮

它将值从左侧输入更改为右侧

部分html代码

<ul>
<li>
  <div class="header">Från</div>
  <input type="text" name="search[legs][0][origin_text]" id="search_legs_0_origin_text" value="Köpenhamn (CPH), Danmark" class="field-1 airport_field" placeholder="Från" data-source="/autocomplete/origin/flight" data-id-element="#search_legs_0_origin_id" />
  <input type="hidden" name="search[legs][0][origin_id]" id="search_legs_0_origin_id" value="6547676" />
  <div class="quick-destinations hide-small"><div class="quick-link" data-text="Köpenhamn (CPH), Danmark" data-id="6547676">Köpenhamn</div>, <div class="quick-link" data-text="Stockholm (STO), Sverige" data-id="6540299">Stockholm</div>, <div class="quick-link" data-text="Bangkok Don Muang (DMK), Thailand" data-id="6547002">Bangkok</div> eller <div class="quick-link" data-text="London Heathrow (LHR), England" data-id="6540398">London</div>?</div>
</li>
<li class="icon"><img class="right_left_arrow" data-number="0" src="http://res.cloudinary.com/dzwdseno3/image/asset/right_left_arrow-c0f7e54c0a61ac009de1b92fd2ff1a4f.png" alt="Right left arrow" /></li>
<li>
  <div>
    <div class="header">Till</div>
    <input type="text" name="search[legs][0][destination_text]" id="search_legs_0_destination_text" value="London (LON), England" class="field-3 airport_field" placeholder="Till" data-source="/autocomplete/destination/flight" data-id-element="#search_legs_0_destination_id" />
    <input type="hidden" name="search[legs][0][destination_id]" id="search_legs_0_destination_id" value="6540382" />
  </div>
</li>

这是执行此操作的脚本

$(".right_left_arrow").on("click", () => {
  var id = parseInt($(this).attr("data-number"))
  var tmp_txt = $(`#search_legs_${id}_origin_text`).val();
  var tmp_id = $(`#search_legs_${id}_origin_id`).val();
  $(`#search_legs_${id}_origin_text`).val($(`#search_legs_${id}_destination_text`).val());
  $(`#search_legs_${id}_origin_id`).val($(`#search_legs_${id}_destination_id`).val())
  $(`#search_legs_${id}_destination_text`).val(tmp_txt)
  $(`#search_legs_${id}_destination_id`).val(tmp_id);
});

由于某些原因，它无法正常工作。

当我单击它时，控制台中没有显示任何内容。

哪里有问题？

Answer 1

您正在使用箭头函数，这意味着单击事件回调中的this 不是指元素本身，而是指词法this（即绑定单击事件的上下文），这通常是 window 对象。

只使用普通的匿名函数:) 仅仅因为你可以使用箭头函数并不意味着你有可以使用它：

$(".right_left_arrow").on("click", function() {
    // Rest of your logic here
    // `this` will refer to the DOM element that triggers the click event
});

Answer 2

当您使用箭头函数时，上下文 this 是声明的封闭上下文（词法 this），在您的情况下是窗口对象。

另一种方法是使用通过处理程序传递的事件并使用属性currentTarget 获取单击的元素。

$(".right_left_arrow").on("click", (e) => {
  // Here you can use e.currentTarget
  var id = parseInt($(e.currentTarget).attr("data-number"))
  
  var tmp_txt = $(`#search_legs_${id}_origin_text`).val();
  var tmp_id = $(`#search_legs_${id}_origin_id`).val();
  $(`#search_legs_${id}_origin_text`).val($(`#search_legs_${id}_destination_text`).val());
  $(`#search_legs_${id}_origin_id`).val($(`#search_legs_${id}_destination_id`).val())
  $(`#search_legs_${id}_destination_text`).val(tmp_txt)
  $(`#search_legs_${id}_destination_id`).val(tmp_id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>  <li>    <div class="header">Från</div>    <input type="text" name="search[legs][0][origin_text]" id="search_legs_0_origin_text" value="Köpenhamn (CPH), Danmark" class="field-1 airport_field" placeholder="Från" data-source="/autocomplete/origin/flight" data-id-element="#search_legs_0_origin_id"    />    <input type="hidden" name="search[legs][0][origin_id]" id="search_legs_0_origin_id" value="6547676" />    <div class="quick-destinations hide-small">      <div class="quick-link" data-text="Köpenhamn (CPH), Danmark" data-id="6547676">Köpenhamn</div>,      <div class="quick-link" data-text="Stockholm (STO), Sverige" data-id="6540299">Stockholm</div>,      <div class="quick-link" data-text="Bangkok Don Muang (DMK), Thailand" data-id="6547002">Bangkok</div> eller      <div class="quick-link" data-text="London Heathrow (LHR), England" data-id="6540398">London</div>?</div>  </li>  <li class="icon"><img class="right_left_arrow" data-number="0" src="http://res.cloudinary.com/dzwdseno3/image/asset/right_left_arrow-c0f7e54c0a61ac009de1b92fd2ff1a4f.png" alt="Right left arrow" /></li>  <li>    <div>      <div class="header">Till</div>      <input type="text" name="search[legs][0][destination_text]" id="search_legs_0_destination_text" value="London (LON), England" class="field-3 airport_field" placeholder="Till" data-source="/autocomplete/destination/flight" data-id-element="#search_legs_0_destination_id"      />      <input type="hidden" name="search[legs][0][destination_id]" id="search_legs_0_destination_id" value="6540382" />    </div>  </li>