使用jQuery

Question

我尝试使用this issue作为指导，但我不确定我的下面的代码我做错了什么。如果有人可以提供帮助，我会很感激。

一点背景：我使用名为Confiforms的附加组件在Confluence中更改HTML的能力有限。我可以使用Confiforms隐藏/显示字段，但我通常发现当我以这种方式配置它时会受到性能影响。

HTML：

<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"/>
                </span>
            </span>
        </p>
    </td>
</tr>

相关的jQuery：

$('input[type="checkbox"]').change(() => {
    if ($(this).is(':checked')) {
        $(this).closest('tr').next('tr').show();
    }
    else {
        $(this).closest('tr').next('tr').hide();
    }
});

谢谢！

Answer 1

使用带箭头功能的jquery时应该非常小心：

$('input[type="checkbox"]').change(function() {
    if ($(this).is(':checked')) {
        $(this).closest('tr').next('tr').show();
    } else {
        $(this).closest('tr').next('tr').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
                </span>
            </span>
        </p>
    </td>
</tr>
</table>

  

箭头功能保留this的上下文，因此它不再是您附加事件的相关元素。

如果您确实想使用箭头功能，可以使用以下内容：

$('input[type="checkbox"]').change((evt) => {
    el = evt.currentTarget;
    if ($(el).is(':checked')) {
        $(el).closest('tr').next('tr').show();
    } else {
        $(el).closest('tr').next('tr').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
                </span>
            </span>
        </p>
    </td>
</tr>
</table>