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

Posted 2023-05-07

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

【英文标题】：jQuery change innerHtml of a group of radio buttons labels with a onClick listener using data-target

【发布时间】：2020-11-10 13:47:51

【问题描述】：

我有多组单选按钮。名称和 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>

【问题讨论】：

.pcconfig-radio-styled-buttons 元素在哪里？此外，您没有将 $(this).data('target') 值正确连接到第一个选择器字符串。

啊，忘记在示例中将其更改为“n”，在实际代码中，类是正确的:-)“你没有连接 $(this).data('target' ) 值正确输入到第一个选择器字符串中。” - 我可以请你详细说明一下吗？可能是我不知道该怎么做的整个问题...... :-)

【参考方案1】：

请检查以下，希望清楚：

$(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。

【讨论】：

甜 :-) 有效。非常感谢。并且一开始的 var 定义非常清楚。

嗯，您的代码中是否存在不允许单选按钮组名称为数组的内容？现在替换为实际命名并引发错误（jquery.js?v=20200024&ver=6797faf:31 Uncaught Error: Syntax error, unrecognized expression: input[name=dcs_computer_type_form[motherboard]]） - 实际命名是这样的（抱歉，现在意识到我可能应该把它放在问题中，只是希望它看起来更简单）：

yyyy

xxxx

xxxx

【参考方案2】：

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

// 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

【讨论】：

感谢您的回答。但是，并不是页面上的所有标签都需要重置，需要有一个条件：$('label[for^=$(this).data("target")]').html("xxxx" ) .... "for" 属性必须是与点击事件一起发送的数据目标。而它的这条线有一个错误......某处。其余的工作......

所以条件是被点击的标签必须包含xxxx？所以如果标签包含yyyy，这是不可能的？

subhuman，不，条件是for属性应该是(this).data("target")。感谢您的帮助 - 但另一个答案似乎做了我想做的事...... :-)