jquery - 使用 jQuery 收听有关更改和文档准备就绪的单选按钮？

Question

我到处搜索，只能找到如何制作单选按钮监听器或如何检查它是否已在 ready 上选中。但从来没有像我需要的那样两者兼而有之:

当我在表单中编辑对象时，根据单选组中选择的内容，a div应该是可见的或隐藏的。当用户更改它时，它应该再次出现/消失。

我可以通过在服务器端添加一个隐藏类来初始化正确的状态 div但随后我必须在 php 和 jQuery 中对所有依赖项进行编程，因为我没有使用 AJAX - 这对我来说没有意义。

我在 jQuery 网站上查找了最佳实践 - 似乎是 this .
但我不明白在我的情况下应该如何做 - $(this)似乎不起作用，我也不知道为什么。因为我引用了事件之外的函数？

var fieldHider = function (turnOn, toggleFields, fadeIn) {
    var visibilityAction;
    if (turnOn) {
        visibilityAction = (fadeIn) ? "fadeIn" : "show";
    } else {
        visibilityAction = (fadeIn) ? "fadeOut" : "hide";
    }
    $(toggleFields)[visibilityAction]();
};

var translatorRadioChanged = function (event) {
    var isOn = ($(this).val() === '1');
    var fading = (event) ? true : false;
    fieldHider(isOn,'label[for="translator"]', fading);
};

var translatorRadioNames = "translatorNeeded";

$(function () {
    $("input[name='" + translatorRadioNames + "']").change(translatorRadioChanged);
    translatorRadioChanged();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="translatorNeeded">
Translator needed
<input type="radio" value="1" name="translatorNeeded">
Yes
<input type="radio" value="0" checked="checked" name="translatorNeeded">
No -> Div below should be hidden!
</label>
<br>
<br>
<label for="translator">
<label class="lcapp-label clearfix" for="translator">
Translator Name + Language
<input type="text" name="name" size="5">
<input type="text" name="lang" size="5">
</label>
</label>

Answer 1

您正在使用 2 个不同的上下文调用该函数。

尝试在页面加载时以及分配更改监听器后在匹配的已检查输入上触发更改事件

改变

$("input[name='" + translatorRadioNames + "']").change(translatorRadioChanged);
translatorRadioChanged();

至

$("input[name='" + translatorRadioNames + "']")
       // assign event listener
       .change(translatorRadioChanged)
       // trigger the event on checked one if it exists
       .filter(':checked').change();

现在该函数将在事件处理程序的上下文中调用，并且将具有 this 的正确上下文