将附加选择器附加到先前声明的包含 DOM 元素的变量

Question

我一辈子都找不到这方面的参考资料，但它似乎是一段很难攻克的代码。这可能是由于我用来查找结果的确切措辞，但据我所知。这是不可能的。

问题很简单，我有一个 radio DOM 元素和一个设置为 DOM 元素的变量。

<fieldset class="my-little-radio">
    <input id="radio-1" class="radio-input" type="radio" name="mylittleradio" value="1">
    <label for="radio-1" class="radio-label">Radio 1</label>
    <input id="radio-2" class="radio-input" type="radio" name="mylittleradio" value="2">
    <label for="radio-2" class="radio-label">Radio 2</label>
</fieldset>


var domRadioInput = $('.my-little-radio input[type=radio]');

然后我运行一些 JS 本质上需要将检查状态切换到同级无线电输入，我想要的无线电输入必须具有值 myNewValue。

domRadioInput + '[value="' + myNewValue + '"]' + .prop('checked', true);

我知道上面是错误的，但是你知道如何实现吗？

具体问题：如何将设置为DOM元素的变量重新用于检查属性变化，例如值？

Answer 1

I have a radio DOM element and a variable set as a DOM element.

您拥有的是一个引用jQuery对象的变量（domRadioInput）； jQuery 对象引用了您调用 $() 时与选择器匹配的所有 DOM 元素（在您的例子中是两个元素）。

I then run some JS that essentially requires the checked status to be switched to a sibling radio input, the radio input I would like must have the value myNewValue.

我假设 myNewValue 包含 "1" 或 "2"。如果是这样，您可以使用 jQuery 的 filter（not 与数组上的相同）来获取新的 jQuery 对象使用上一个与新选择器匹配的所有元素（大概只有一个匹配），然后在它们上设置 checked 属性：

domRadioInput.filter(`[value="${myNewValue}"]`).prop("checked", true);

the jQuery API documentation 中的更多内容。

将附加选择器附加到先前声明的包含 DOM 元素的变量

Appending additional selectors to a previously declared variable containing a DOM element

html

jquery

radio-button

jquery-selectors