因为您想使用当前单击的单选按钮,所以:
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>