Javascript 选择输入时显示隐藏范围

我试图在选择输入时显示隐藏的跨度标记。页面上将显示多个输入，每个输入都有自己的隐藏div，显示价格

我尝试过使用jQuery的.closest和.find，但没有任何运气。我知道。如果是在父元素中，那么最接近的将起作用，这似乎是应该走的路，但到目前为止还没有成功

这是我的HTML：

<div class="tm-extra-product-options-container">
    <ul data-rules="[]" data-rulestype="[]" data-tm-validation="[]" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-variations tm-variation-ul-radio variation-element-2">
        <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row">
            <input class="tmcp-field  tm-epo-variation-element tmhexcolor_2_0_0 tm-epo-field tmcp-radio" name="tm_attribute_pa_size_2" data-price="" data-rules="" data-rulestype="" data-image="" data-imagep="" data-tm-for-variation="pa_size" value="12-x-48" id="tmcp_choice_2_0_0" tabindex="" type="radio">
            <label for="tmcp_choice_2_0_0"></label>
            <label for="tmcp_choice_2_0_0">
                <span class="tm-label">12 x 48</span>
            </label>
            <span class="pa_size price" id="varID-1" style="color:#29F938;font-weight:700;display:none;">5.00</span>
        </li>
        <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row">
            <input class="tmcp-field  tm-epo-variation-element tmhexcolor_2_1_1 tm-epo-field tmcp-radio" name="tm_attribute_pa_size_2" data-price="" data-rules="" data-rulestype="" data-image="" data-imagep="" data-tm-for-variation="pa_size" value="24-x-24" id="tmcp_choice_2_1_1" tabindex="" type="radio">
            <label for="tmcp_choice_2_1_1"></label>
            <label for="tmcp_choice_2_1_1">
                <span class="tm-label">24 x 24</span>
            </label>
            <span class="pa_size price" id="varID-1" style="color:#29F938;font-weight:700;display:none;">6.00</span>
        </li>
        <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row">
            <input class="tmcp-field  tm-epo-variation-element tmhexcolor_2_2_2 tm-epo-field tmcp-radio" name="tm_attribute_pa_size_2" data-price="" data-rules="" data-rulestype="" data-image="" data-imagep="" data-tm-for-variation="pa_size" value="24-x-36" id="tmcp_choice_2_2_2" tabindex="" type="radio">
            <label for="tmcp_choice_2_2_2"></label>
            <label for="tmcp_choice_2_2_2">
                <span class="tm-label">24 x 36</span>
            </label>
            <span class="pa_size price" id="varID-1" style="color:#29F938;font-weight:700;display:none;">7.50</span>        
        </li>
    </ul>
</div>

最后，这里有一个

您可以使用兄弟姐妹或nextAll

演示：

您可以使用兄弟姐妹或nextAll

演示：

您可以使用兄弟姐妹。看这个演示

$(this).siblings('span.price').fadeIn();

您可以使用兄弟姐妹。看这个演示

$(this).siblings('span.price').fadeIn();

span不是输入的最近元素，它是输入的兄弟元素。你可以像下面这样做

 $('input[data-tm-for-variation="pa_size"]').change(function(){
    $(this).closest('li').find('span.price').fadeIn();
});

span不是输入的最近元素，它是输入的兄弟元素。你可以像下面这样做

 $('input[data-tm-for-variation="pa_size"]').change(function(){
    $(this).closest('li').find('span.price').fadeIn();
});

当使用CSS可以实现相同的功能时，不要使用jQuery/JS

使用

跨度价格{ 显示：无； } 输入[变量数据tm=pa_尺寸]：选中~span.price{ 显示：内联块； } 12 x 48 5 24 x 24 6 24 x 36 7.50 当使用CSS可以实现相同的功能时，不要使用jQuery/JS

使用

跨度价格{ 显示：无； } 输入[变量数据tm=pa_尺寸]：选中~span.price{ 显示：内联块； } 12 x 48 5 24 x 24 6 24 x 36 7.50

---

使用兄弟姐妹。哇，我尝试过父母，但从来没有想过尝试兄弟姐妹，请张贴作为答案，这样我可以接受如果你有兴趣用纯css做这件事，我会看看。就我个人而言，我认为这是最干净的方式。您可能需要稍微调整标记。或者@Tushar的回答中提到的常规同级选择器…使用同级。哇，我尝试过父母，但从来没有想过尝试兄弟姐妹，请张贴作为答案，这样我可以接受如果你有兴趣用纯css做这件事，我会看看。就我个人而言，我认为这是最干净的方式。您可能需要稍微调整标记。或者@Tushar的回答中提到的一般同级选择器。。。

input[data-tm-for-variation="pa_size"]:checked ~ span.price {
    display: inline-block;
}