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

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

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，我已经在 comment 中提供了解决方案.

使用 siblings() 选择兄弟元素。

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

注意:这不会隐藏之前选中的单选按钮的文本。如果你想隐藏它，你可以使用下面的代码。

Demo

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

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

---

一些改进:

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