选择输入时显示隐藏范围

Question

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

我曾尝试使用jQuery的.closest（）和.find（），但还没有碰到运气。 我知道.closest（）如果在父元素中会起作用，这似乎应该是要走的路，但到目前为止没有成功。

这是我的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>

这是我的jQuery：

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

最后是一个JSFiddle

Answer 1

如果可以使用CSS实现相同的功能，请不要使用jQuery / JS 。

使用CSS通用兄弟选择器~

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

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

 <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;">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;">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;">7.50</span> </li> </ul> </div> 

---

问题是OP代码是<span>是单选按钮的同级元素。 如果您仍然想使用jQuery，我已经在注释中提供了解决方案。

使用siblings()选择同级元素。

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

演示版

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <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> 

注意：这不会隐藏上一个选中的单选按钮的文本。 如果要隐藏它，可以使用以下代码。

演示版

$('input[data-tm-for-variation="pa_size"]').change(function () {
    // Hide text of other radio buttons
    $('span.price').fadeOut();

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

---

一些改进：

1. 我怀疑没有使用收音机<input>上的许多属性。 那些可以删除。 例如： tabindex=""
2. 有两种<label>用于单个无线电，具有相同for属性值。 首先， 可以删除空label 。
3. ID应该是唯一的 。 当前，所有span.price都使用相同的ID varID-1 。
4. 不要使用内联样式

Answer 2

您可以改用siblings 。 有关演示，请参见此JsFiddle 。

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

Answer 3

您可以使用siblings()或nextAll()

jQuery(function($) {
        $('input[data-tm-for-variation="pa_size"]').change(function(){
                $(this).nextAll('span.price:first').fadeIn();
        });
});

演示： http ： //jsfiddle.net/lotusgodkk/r1fvpoj2/1/

Answer 4

span不是input最接近元素，而是input同级。 您可以按照以下步骤进行操作。

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