jquery 添加侦听器记住上一次单击

2ledvvac  于 2023-04-29  发布在  jQuery
关注(0)|答案(1)|浏览(97)

我有单选按钮:

<input class="transfer-item" type="radio" name="transfer" value="1">
<input class="transfer-item" type="radio" name="transfer" value="2">
<input class="transfer-item" type="radio" name="transfer" value="3">

我需要点击后听iframe响应。我有这样的代码:

$('.transfer-item').each(function (key, item) {
    $(item).click(function (e) {
        var $main = $(item).closest('li');
        const $iframe = $main.find('iframe');
        if (!$iframe.attr('src')) {
            $iframe.attr('src', $iframe.data('src'));
            if (window.addEventListener) {
                window.addEventListener('message', function (event) {
                if (event.data.message === 'pickerResult') {
                    var point = event.data.point;
                    console.log($main);
                    $main.find('.iframe-wrap').hide();
                    $main.find('.zip-code-select-text').text(point.address);
                    $main.find('.zip-code-select input:hidden').val(point.zip);
                    $main.find('.zip-code-select').show();
                }
            }
        }
    });
});

console.log返回所有点击历史:

我怎样才能从单击的单选按钮中收到当前的响应?我需要一个洗耳恭听的人。

编辑:

<ul>
  <li>
    <input class="transfer-item" type="radio" name="transfer" value="1">
    <label>
      Transfer 1
      <div class="transfer-zip-code">
        <div class="iframe-wrap">
          <iframe data-src="https://b2c.cpost.cz/locations/?type=POST_OFFICE" allow="geolocation"></iframe>
        </div>
        <div class="zip-code-select">
          <input type="hidden" name="transfer_zip_code_1" value="">
          <span class="zip-code-select-text"></span>
          <a class="zip-code-select-change" href="#">Change</a>
        </div>
      </div>
    </label>
  </li>
  <li>
    <input class="transfer-item" type="radio" name="transfer" value="2">
    <label>
      Transfer 2
      <div class="transfer-zip-code">
        <div class="iframe-wrap">
          <iframe data-src="https://b2c.cpost.cz/locations/?type=BALIKOVNY" allow="geolocation"></iframe>
        </div>
        <div class="zip-code-select">
          <input type="hidden" name="transfer_zip_code_2" value="">
          <span class="zip-code-select-text"></span>
          <a class="zip-code-select-change" href="#">Change</a>
        </div>
      </div>
    </label>
  </li>
</ul>
brtdzjyr

brtdzjyr1#

由于您希望使用当前单击的单选按钮,因此:
a)移除添加在顶部的环
B)相应地更改代码。
你可以像下面这样实现它:

$('.transfer-item').click(function(e) {
  var $main = $(this).closest('li');
  var $iframe = $main.find('iframe');
  if (!$iframe.attr('src')) {
    $iframe.attr('src', $iframe.data('src'));
    $(this).on('message', function(e) {
      if (e.data.message === 'pickerResult') {
        var point = e.data.point;
        $main.find('.iframe-wrap').hide();
        $main.find('.zip-code-select-text').text(point.address);
        $main.find('.zip-code-select input:hidden').val(point.zip);
        $main.find('.zip-code-select').show();
      }
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="a">
    <input class="transfer-item" type="radio" name="transfer" value="1">
    <label>
      Transfer 1
      <div class="transfer-zip-code">
        <div class="iframe-wrap">
          <iframe data-src="https://b2c.cpost.cz/locations/?type=POST_OFFICE" allow="geolocation"></iframe>
        </div>
        <div class="zip-code-select">
          <input type="hidden" name="transfer_zip_code_1" value="">
          <span class="zip-code-select-text"></span>
          <a class="zip-code-select-change" href="#">Change</a>
        </div>
      </div>
    </label>
  </li>
  <li class="b">
    <input class="transfer-item" type="radio" name="transfer" value="2">
    <label>
      Transfer 2
      <div class="transfer-zip-code">
        <div class="iframe-wrap">
          <iframe data-src="https://b2c.cpost.cz/locations/?type=BALIKOVNY" allow="geolocation"></iframe>
        </div>
        <div class="zip-code-select">
          <input type="hidden" name="transfer_zip_code_2" value="">
          <span class="zip-code-select-text"></span>
          <a class="zip-code-select-change" href="#">Change</a>
        </div>
      </div>
    </label>
  </li>
</ul>

相关问题