jQuery 使用数据目标更改带有 onClick 侦听器的一组单选按钮标签的 innerHtml

Question

我有多组单选按钮。名称和 Id 动态地通过变量。每个单选按钮都有一个标签，我使用（通过 css）作为按钮而不是单选按钮本身（隐藏）。

当我点击一个标签时，我需要做两件事：

该组单选按钮中的所有标签将其 innerHtml 重置为 xxxx
被点击的标签 innerHtml 设置为 yyyy

第二部分我可以做。这是我遇到麻烦的第一部分。也许需要作为一个循环来做？但是无论如何，先用一个单选按钮试了一下，没用

$(document).on('click', '.n', function() {
  $('label[for^=$(this).data("target")]').html("xxxx");
  $("#" + $(this).data("target") + "label").html("yyyy");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="1" name="na" value="" />
<label for="1" data-target="1" id="1label" class="n" selected>yyyy</label>
<input type="radio" id="2" name="na" value="" />
<label for="2" data-target="2" id="2label" class="n">xxxx</label>
<input type="radio" id="3" name="na" value="" />
<label for="3" data-target="3" id="3label" class="n">xxxx</label>

Answer 1

希望我正确理解了您的问题并使用以下代码片段解决了它：

// loop over all labels
$('label').each(function () {
  // add onclick listeners to all labels
  $(this).on('click', function () {
    // set each label's innerhtml to xxxx
    $('label').each(function () {
      $(this).html('xxxx')
    })
    // set currently clicked label's innerhtml to yyyy
    $(this).html('yyyy')
  })
})

示例：https://codepen.io/SubhumanWasTaken/pen/MWKZPrb

Answer 2

请检查下面，希望清楚：

$(document).on('click', '.n', function() {
    var thisLabel = $(this);
    var thisDataTarget = thisLabel.data('target');
    var thisTarget = $('#'+thisDataTarget);
    var thisGroupName = thisTarget.attr('name');
    $('input[name='+thisGroupName+']').each(function(i) {
        var loopInput = $(this);
        var loopID = loopInput.attr('id');
        var loopText = loopID==thisDataTarget ? 'yyyy' : 'xxxx';
        $('label[for='+loopID+']').html( loopText );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="1" name="na" value="" />
<label for="1" data-target="1" id="1label" class="n" selected>yyyy</label>
<input type="radio" id="2" name="na" value="" />
<label for="2" data-target="2" id="2label" class="n">xxxx</label>
<input type="radio" id="3" name="na" value="" />
<label for="3" data-target="3" id="3label" class="n">xxxx</label>

也在 JSFiddle.

jQuery 使用数据目标更改带有 onClick 侦听器的一组单选按钮标签的 innerHtml

jQuery change innerHtml of a group of radio buttons labels with a onClick listener using data-target

html

jquery

innerhtml