如何使用更通用的选择器？

Question

以下代码来自 SharePoint 表单，我在其中注入了一些 jQuery 以根据单选按钮选择是或否来隐藏和显示部分。我无法控制HTML 确实输出，因为它来自 SP 表单。下面的 jQuery 选择器现在可以正常工作，但我想让它更通用，这样它就不会绑定到任何输入 ID。如果我将此表单从开发 SP 服务器复制到另一个 ID 更改。

当前 jQuery 选择器正在针对下面的 HTML 输出工作：

// Password expire = Yes
if ($("input[id='ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl00']").is(':checked')) {
  $("#PasswordExpireReason").hide();
}

// Password expire = No
if ($("input[id='ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl01']").is(':checked')) {
  $("#PasswordExpireReason").show();
}

HTML 输出：

<span title="Yes" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl00" type="radio" value="ctl00">
  <span title="No" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl01" type="radio" value="ctl01">
  </span>
</span>

由于两个单选按钮的跨度标题为 "Yes" 并且围绕它们的跨度标题为 "No" 是否有一种方法可以在给定跨度标题为是或否的情况下获得最接近的输入？关键是，使用跨度而不是输入的 id 来匹配每个无线电。

谢谢！

Answer 1

更好的方法是为单选按钮编写一个通用选择器。如果这是此页面上唯一的无线电输入，那么您可以这样写：

jQuery("input[type=radio]").on("change", function(){
    alert("Alerted!")
    /*Write your code here*/
});

jQuery("input[type=radio]").on("change", function(){
    alert("Alerted!")
    /*Write your code here*/
    if (this.value === "ctl00" ) {
        $("#PasswordExpireReason").hide();
    }
    else {
       $("#PasswordExpireReason").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span title="Yes" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl00" type="radio" value="ctl00">
  </span>
  <span title="No" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl01" type="radio" value="ctl01">
  </span>

<div>
<span id="PasswordExpireReason">This is the password expiry reason</span>
</div>

您也可以使用 jQuery 的 .find() 来选择 span 之后的第一个后代单选输入元素，尽管这不是正确的做法。

用于获取标题为 "Yes" 且否：

的收音机输入的选择器

$('span.ms-RadioText[title=Yes]').find("input[type=radio]").eq(0);
$('span.ms-RadioText[title=No]').find("input[type=radio]").eq(0);

获取标题为 "Yes" 和 "No" 的单选按钮是否被选中：

$('span.ms-RadioText[title=Yes]').find("input[type=radio]").eq(0).is(":checked")
$('span.ms-RadioText[title=No]').find("input[type=radio]").eq(0);.is(":checked")

// Password Expire (Yes) 
$('span.ms-RadioText[title=Yes]').find("input[type=radio]").eq(0).click(function() { 
if ($('span.ms-RadioText[title=Yes]').find("input[type=radio]").eq(0).is(":checked")) { $("#PasswordExpireReason").hide(); } }); 
// Password Expire (No) 

$('span.ms-RadioText[title=No]').find("input[type=radio]").eq(0).click(function() { if ($('span.ms-RadioText[title=No]').find("input[type=radio]").eq(0).is(":checked")) { $("#PasswordExpireReason").show(); } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span title="Yes" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl00" type="radio" value="ctl00">
  </span>
  <span title="No" class="ms-RadioText">
  <input name="ctl00$m$g_b9122b13_e38a_4fc7_b14d_4cb582079581$ff111$ctl00$RadioButtons" id="ctl00_m_g_b9122b13_e38a_4fc7_b14d_4cb582079581_ff111_ctl00_ctl01" type="radio" value="ctl01">
  </span>

<div>
<span id="PasswordExpireReason">This is the password expiry reason</span>
</div>

如何使用更通用的选择器？

How do I use a more generic selector?

javascript

jquery

selector