提问者:小点点

用jQuery隐藏未选定的表TR TD内容


我试图隐藏表内容的一部分,但隐藏未选中的选项的标签有困难。

我有以下三种选择。如果我的用户选择了其中一个,我想隐藏其他两个,只显示标签和选择的选择。现在,除了标签,我可以隐藏其他的一切。

我尝试添加一个$(this).最近的(“tr td.text-prompt”).show();
和一个$(“tr td.text-prompt”).不是($(this)).hide();

但这并不能隐藏未被选中的组。请帮忙弄清楚...

null

$(document).ready(function () {
    $("select").each(function () {
        $(this).on("change", function () {
            var val = $(this).val();
            //alert(val);
            console.log(val);
            if (val > 0) {
                $('.add-to-cart').show();
                $('#selectPhoto').hide();
                $('.attribute-description').hide();
                $("select").hide();                                       
                $(this).show();

            } else {
                $("select").show();
                $('#selectPhoto').show();
                $('.attribute-description').show();
                $('.add-to-cart').hide();
                // $(this).hide();
            }
        });
    });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td id=product_attribute_label_390>
            <label class=text-prompt>CANVAS PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>

        <td id=product_attribute_input_390>
            <select name=product_attribute_390 id=product_attribute_390>
                <option value=0>---
                <option value=2391>8 &quot;X 12 &quot;[&#x2B;$26.00]
                <option value=2392>10 &quot;X 12 &quot;[&#x2B;$28.00]
                <option value=2393>16 &quot;X 20 &quot;[&#x2B;$35.00]
                <option value=2394>20 &quot;X 24 &quot;[&#x2B;$60.00]
                <option value=2395>24 &quot;X 36 &quot;[&#x2B;$50.00]
                <option value=2396>30 &quot;X 40 &quot;[&#x2B;$66.00]
                <option value=2397>36 &quot;X 48 &quot;[&#x2B;$142.00]
                <option value=2398>40 &quot;X 60 &quot;[&#x2B;$200.00]
            </select>
        </td>
    </tr>
    <tr>
        <td id=product_attribute_label_386>
            <label class=text-prompt>ACRYLIC PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>
        <td id=product_attribute_input_386>
            <select name=product_attribute_386 id=product_attribute_386>
                <option value=0>---
                <option value=2361>8 &quot;x 12 &quot;[&#x2B;$70.00]
                <option value=2362>12 &quot;X 16 &quot;[&#x2B;$80.00]
                <option value=2363>12 &quot;X 36 &quot;[&#x2B;$160.00]
                <option value=2364>16 &quot;x 20 &quot;[&#x2B;$110.00]
                <option value=2365>20 &quot;x 24 &quot;[&#x2B;$208.00]
                <option value=2366>20 &quot;x 30 &quot;[&#x2B;$220.00]
                <option value=2367>30 &quot;x 40 &quot;[&#x2B;$280.00]
            </select>
        </td>
    </tr>
    <tr>
        <td id=product_attribute_label_387>
            <label class=text-prompt>METAL PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>
        <td id=product_attribute_input_387>
            <select name=product_attribute_387 id=product_attribute_387>
                <option value=0>---
                <option value=2368>8 &quot;x 12 &quot;[&#x2B;$60.00]
                <option value=2369>12 &quot;x 16 &quot;[&#x2B;$70.00]
                <option value=2370>12 &quot;x 36 &quot;[&#x2B;$252.00]
                <option value=2371>16 &quot;x 20 &quot;[&#x2B;$80.00]
                <option value=2372>20 &quot;x 24 &quot;[&#x2B;$160.00]
                <option value=2373>20 &quot;x 30 &quot;[&#x2B;$220.00]
                <option value=2374>30 &quot;x 40 &quot;[&#x2B;$356.00]
            </select>
        </td>
    </tr>
</table>

null


共1个答案

匿名用户

您可以在同一行中查找.text-prompt类:

null

$(document).ready(function () {
    $("select").each(function () {
        $(this).on("change", function () {
            var val = $(this).val();
            //alert(val);
            console.log(val);
            if (val > 0) {
                $('.add-to-cart').show();
                $('#selectPhoto').hide();
                $('.attribute-description').hide();
                $("select").hide();  
                $('.text-prompt').hide();                                     
                $(this).show();
                $(this).closest('tr').find('.text-prompt').show();

            } else {
                $("select").show();
                $('#selectPhoto').show();
                $('.attribute-description').show();
                $('.add-to-cart').hide();
                $('.text-prompt').show();
            }
        });
    });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td id=product_attribute_label_390>
            <label class=text-prompt>CANVAS PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>

        <td id=product_attribute_input_390>
            <select name=product_attribute_390 id=product_attribute_390>
                <option value=0>---
                <option value=2391>8 &quot;X 12 &quot;[&#x2B;$26.00]
                <option value=2392>10 &quot;X 12 &quot;[&#x2B;$28.00]
                <option value=2393>16 &quot;X 20 &quot;[&#x2B;$35.00]
                <option value=2394>20 &quot;X 24 &quot;[&#x2B;$60.00]
                <option value=2395>24 &quot;X 36 &quot;[&#x2B;$50.00]
                <option value=2396>30 &quot;X 40 &quot;[&#x2B;$66.00]
                <option value=2397>36 &quot;X 48 &quot;[&#x2B;$142.00]
                <option value=2398>40 &quot;X 60 &quot;[&#x2B;$200.00]
            </select>
        </td>
    </tr>
    <tr>
        <td id=product_attribute_label_386>
            <label class=text-prompt>ACRYLIC PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>
        <td id=product_attribute_input_386>
            <select name=product_attribute_386 id=product_attribute_386>
                <option value=0>---
                <option value=2361>8 &quot;x 12 &quot;[&#x2B;$70.00]
                <option value=2362>12 &quot;X 16 &quot;[&#x2B;$80.00]
                <option value=2363>12 &quot;X 36 &quot;[&#x2B;$160.00]
                <option value=2364>16 &quot;x 20 &quot;[&#x2B;$110.00]
                <option value=2365>20 &quot;x 24 &quot;[&#x2B;$208.00]
                <option value=2366>20 &quot;x 30 &quot;[&#x2B;$220.00]
                <option value=2367>30 &quot;x 40 &quot;[&#x2B;$280.00]
            </select>
        </td>
    </tr>
    <tr>
        <td id=product_attribute_label_387>
            <label class=text-prompt>METAL PRINTS </label>
            <div class=attribute-description>
                <p>Please Choose your Size:
            </div>
        </td>
        <td id=product_attribute_input_387>
            <select name=product_attribute_387 id=product_attribute_387>
                <option value=0>---
                <option value=2368>8 &quot;x 12 &quot;[&#x2B;$60.00]
                <option value=2369>12 &quot;x 16 &quot;[&#x2B;$70.00]
                <option value=2370>12 &quot;x 36 &quot;[&#x2B;$252.00]
                <option value=2371>16 &quot;x 20 &quot;[&#x2B;$80.00]
                <option value=2372>20 &quot;x 24 &quot;[&#x2B;$160.00]
                <option value=2373>20 &quot;x 30 &quot;[&#x2B;$220.00]
                <option value=2374>30 &quot;x 40 &quot;[&#x2B;$356.00]
            </select>
        </td>
    </tr>
</table>