选择输入时显示隐藏范围

Question

I am trying to show a hidden span tag when an input is selected. Multiple inputs will be present on the page and each one has its own hidden div showing the price.

I have tried using jQuery's .closest() and .find() but have not had any luck. I know .closest() will work if it is within the parent element which seems like this should be the way to go but no success so far.

Here is my 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>

And here is my jQuery:

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

Finally here is a JSFiddle

Answer 1

Don't use jQuery/JS when the same can be achieved using CSS.

Use CSS General Sibling Selector ~

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> 

---

The problem is OP code is that the <span> is the sibling element of the radio button. If you still want to use jQuery I've already provided solution in the comment .

Use siblings() to select the sibling element.

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

Demo

 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> 

Note: This does not hide the text of the previous checked radio button. If you want to hide that, you can use following code.

Demo

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

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

---

Some Improvements:

1. There are many attributes on the radio <input> which I suspect are not used. Those can be removed. Ex: tabindex=""
2. There are two <label> used for single radio, having same for attribute value. First of those, an empty label can be removed .
3. ID should be unique . Currently, same ID varID-1 is used on all span.price .
4. Don't use inline styles

Answer 2

You can use siblings instead. See this JsFiddle for a demo.

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

Answer 3

You can use siblings() or nextAll()

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

Demo: http://jsfiddle.net/lotusgodkk/r1fvpoj2/1/

Answer 4

span is not closest element of input , it is sibling of input . You can do it like following.

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