Question

我正在尝试在选择输入时显示隐藏的span标记。页面上将出现多个输入，每个输入都有自己的隐藏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 General Sibling Selector ~

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

Demo

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Demo

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

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

一些改进：

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

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();
});

选择输入时显示隐藏的跨度

4 个答案: