登录
当前位置： 首页 > 知识库问答 >
问题：

用jQuery隐藏未选中的div dl dt而不是表内容

汪理
2023-03-14

如果我想在不同的结构上使用相同的解决方案，比如dl dt模块而不是表，该怎么办？我将如何构造JQuery代码以显示所选产品的标签？

我尝试了多种方法来显示最近的标签，但都没有效果。

请参阅要演示的代码段。

<div class="attributes">
    <dl>
        <dt id="product_attribute_label_390"><label class="text-prompt"> CANVAS PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_390">
            <div class="select-wrap" data-children-count="1"><select name="product_attribute_390"
                    id="product_attribute_390">
                    <option value="0">---</option>
                    <option value="2391">8" X 12" [+$26.00]</option>
                    <option value="2392">10" X 12" [+$28.00]</option>
                    <option value="2393">16" X 20" [+$35.00]</option>
                    <option value="2394">20" X 24" [+$60.00]</option>
                    <option value="2395">24" X 36" [+$50.00]</option>
                    <option value="2396">30" X 40" [+$66.00]</option>
                    <option value="2397">36" X 48" [+$142.00]</option>
                    <option value="2398">40" X 60" [+$200.00]</option>
                </select>
                <span class="select-box">
                    <span class="select-inner">---</span>
                </span>
            </div>
        </dd>
        <dt id="product_attribute_label_386"><label class="text-prompt"> ACRYLIC PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_386">
            <div class="select-wrap" data-children-count="1"><select name="product_attribute_386"
                    id="product_attribute_386">
                    <option value="0">---</option>
                    <option value="2361">8" x 12" [+$70.00]</option>
                    <option value="2362">12" X 16" [+$80.00]</option>
                    <option value="2363">12" X 36" [+$160.00]</option>
                    <option value="2364">16" x 20" [+$110.00]</option>
                    <option value="2365">20" x 24" [+$208.00]</option>
                    <option value="2366">20" x 30" [+$220.00]</option>
                    <option value="2367">30" x 40" [+$280.00]</option>
                </select>
                <span class="select-box">
                    <span class="select-inner">---</span>
                </span>
            </div>
        </dd>
        <dt id="product_attribute_label_387"><label class="text-prompt"> METAL PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_387">
            <div class="select-wrap" data-children-count="1"><select name="product_attribute_387"
                    id="product_attribute_387">
                    <option value="0">---</option>
                    <option value="2368">8" x 12" [+$60.00]</option>
                    <option value="2369">12" x 16" [+$70.00]</option>
                    <option value="2370">12" x 36" [+$252.00]</option>
                    <option value="2371">16" x 20" [+$80.00]</option>
                    <option value="2372">20" x 24" [+$160.00]</option>
                    <option value="2373">20" x 30" [+$220.00]</option>
                    <option value="2374">30" x 40" [+$356.00]</option>
                </select>
                <span class="select-box">
                    <span class="select-inner">---</span>
                </span>
            </div>
        </dd>
    </dl>
</div>

我尝试使用JQuery隐藏未选择的标签，但找不到有选择地显示活动选择的方法。

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();
                $('.attribute-description').hide();
                $("select").hide();
                $('.text-prompt').hide();
                $(this).show();
                $(this).closest('.text-prompt').show();
                $(this).closest('label').find('.text-prompt').show();
                $(this).closest('dt label .text-prompt').show();

            } else {
                $("select").show();
                $('.select-wrap').show();
                $('.attribute-description').show();
                $('.add-to-cart').hide();
                $('.text-prompt').show();
            }
        });
    });
});
<div class="attributes">
    <dl>
        <dt id="product_attribute_label_390">
            <label class="text-prompt"> CANVAS PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_390">
            <div class="select-wrap" data-children-count="1">
                <select name="product_attribute_390"
                    id="product_attribute_390">
                    <option value="0">---</option>
                    <option value="2391">8" X 12" [+$26.00]</option>
                    <option value="2392">10" X 12" [+$28.00]</option>
                    <option value="2393">16" X 20" [+$35.00]</option>
                    <option value="2394">20" X 24" [+$60.00]</option>
                    <option value="2395">24" X 36" [+$50.00]</option>
                    <option value="2396">30" X 40" [+$66.00]</option>
                    <option value="2397">36" X 48" [+$142.00]</option>
                    <option value="2398">40" X 60" [+$200.00]</option>
                </select>
            </div>
        </dd>
        <p>
        <dt id="product_attribute_label_386">
            <label class="text-prompt"> ACRYLIC PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_386">
            <div class="select-wrap" data-children-count="1">
                <select name="product_attribute_386"
                    id="product_attribute_386">
                    <option value="0">---</option>
                    <option value="2361">8" x 12" [+$70.00]</option>
                    <option value="2362">12" X 16" [+$80.00]</option>
                    <option value="2363">12" X 36" [+$160.00]</option>
                    <option value="2364">16" x 20" [+$110.00]</option>
                    <option value="2365">20" x 24" [+$208.00]</option>
                    <option value="2366">20" x 30" [+$220.00]</option>
                    <option value="2367">30" x 40" [+$280.00]</option>
                </select>

            </div>
        </dd>
        <p>
        <dt id="product_attribute_label_387">
            <label class="text-prompt"> METAL PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_387">
            <div class="select-wrap" data-children-count="1">
                <select name="product_attribute_387" id="product_attribute_387">
                    <option value="0">---</option>
                    <option value="2368">8" x 12" [+$60.00]</option>
                    <option value="2369">12" x 16" [+$70.00]</option>
                    <option value="2370">12" x 36" [+$252.00]</option>
                    <option value="2371">16" x 20" [+$80.00]</option>
                    <option value="2372">20" x 24" [+$160.00]</option>
                    <option value="2373">20" x 30" [+$220.00]</option>
                    <option value="2374">30" x 40" [+$356.00]</option>
                </select>
            </div>
        </dd>
    </dl>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

null

共有1个答案

邓禄
2023-03-14

您可以检查select的值是否不是0（取决于此）使用$（this）.closest（“dd”）.prev（）.find（“.text-prompt”）使用$（“.attribute-description”）.show（）显示您的标签。

演示代码：

null

$(document).ready(function() {
  $("select").on("change", function() {
    var val = $(this).val();
    if (val != '0') {
      $("dd").not($(this).closest("dd")).hide() //hide other
      $("dt").not($(this).closest("dd").prev()).hide()
      //show label
      $(this).closest("dd").prev().find(".text-prompt").show()
      $(this).closest("dd").prev().find(".attribute-description").hide()
    } else {
      $("dd ,dt").show()
      $(".attribute-description").show()
    }
  });
});
<div class="attributes">
  <dl>
    <dt id="product_attribute_label_390">
            <label class="text-prompt"> CANVAS PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
    <dd id="product_attribute_input_390">
      <div class="select-wrap" data-children-count="1">
        <select name="product_attribute_390" id="product_attribute_390">
          <option value="0">---</option>
          <option value="2391">8" X 12" [+$26.00]</option>
          <option value="2392">10" X 12" [+$28.00]</option>
          <option value="2393">16" X 20" [+$35.00]</option>
          <option value="2394">20" X 24" [+$60.00]</option>
          <option value="2395">24" X 36" [+$50.00]</option>
          <option value="2396">30" X 40" [+$66.00]</option>
          <option value="2397">36" X 48" [+$142.00]</option>
          <option value="2398">40" X 60" [+$200.00]</option>
        </select>
      </div>
    </dd>
    <p>
      <dt id="product_attribute_label_386">
            <label class="text-prompt"> ACRYLIC PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
      <dd id="product_attribute_input_386">
        <div class="select-wrap" data-children-count="1">
          <select name="product_attribute_386" id="product_attribute_386">
            <option value="0">---</option>
            <option value="2361">8" x 12" [+$70.00]</option>
            <option value="2362">12" X 16" [+$80.00]</option>
            <option value="2363">12" X 36" [+$160.00]</option>
            <option value="2364">16" x 20" [+$110.00]</option>
            <option value="2365">20" x 24" [+$208.00]</option>
            <option value="2366">20" x 30" [+$220.00]</option>
            <option value="2367">30" x 40" [+$280.00]</option>
          </select>

        </div>
      </dd>
      <p>
        <dt id="product_attribute_label_387">
            <label class="text-prompt"> METAL PRINTS </label>
            <div class="attribute-description">
                <p>Please Choose your Size:</p>
            </div>
        </dt>
        <dd id="product_attribute_input_387">
          <div class="select-wrap" data-children-count="1">
            <select name="product_attribute_387" id="product_attribute_387">
              <option value="0">---</option>
              <option value="2368">8" x 12" [+$60.00]</option>
              <option value="2369">12" x 16" [+$70.00]</option>
              <option value="2370">12" x 36" [+$252.00]</option>
              <option value="2371">16" x 20" [+$80.00]</option>
              <option value="2372">20" x 24" [+$160.00]</option>
              <option value="2373">20" x 30" [+$220.00]</option>
              <option value="2374">30" x 40" [+$356.00]</option>
            </select>
          </div>
        </dd>
  </dl>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 类似资料：
  • 用jQuery隐藏未选定的表TR TD内容

    我试图隐藏表内容的一部分，但隐藏未选中的选项的标签有困难。 我有以下三种选择。如果我的用户选择了其中一个，我想隐藏其他两个，只显示标签和选择的选择。现在，除了标签，我可以隐藏其他的一切。 我尝试添加一个 和一个 但这并不能隐藏未被选中的组。请帮忙弄清楚... null null

  • 只是禁用滚动而不隐藏它？

    问题内容： 我正在尝试使用灯箱时禁用父级的html / body滚动条。这里的主要词是 disable 。我也 没有 想隐藏它。 这样做的原因是使站点跳转并占据了滚动条所在的区域。 我想知道是否有可能在仍然显示它的同时禁用滚动条。 问题答案： 如果覆盖层下的页面可以在顶部“固定”，则在打开覆盖层时可以设置 您仍应看到右侧的滚动条，但内容不可滚动。当您关闭叠加层时，只需还原这些属性即可 我之所以这样

  • 如何使用XML（而不是代码隐藏）在Android中隐藏菜单项？[副本]

    我尝试了和。我还尝试了。它只会禁用菜单项，但我需要完全隐藏它（因此它甚至不应该显示为该项分配的空间）。 为了隐藏菜单项，我可以对XML进行哪些更改？

  • Spring Data Rest-隐藏而不是公开ID

    我有一个entity类，它有一个映射为的自然ID字段，而我没有任何代理ID（仅为表ID发明的字段）字段。并且，在Jackson编组的JSON中，我看到了一个额外的。 所以不是： 我支持这些依赖： Spring Boot 2.0.3。

  • 发布使用jquery隐藏的表单中的数据

    我有一个使用jquery隐藏的表单，单击它就会显示出来。我想使用php发布数据，但单击“提交”时什么也没发生。参见代码 if（isset（$_POST['mail it'])) { echo"do某事"；}

  • jQuery隐藏/删除5秒后的DIV内容

    如何自动隐藏或删除DIV的内容。我把一些信息放在一个容器里。 我想显示新消息只有几秒钟，它可以是5,10什么，但然后我想它是空的，添加新消息，显示它，而不是隐藏。我当然知道setTimeout的"诀窍"： 但是在这个选项中，我必须通过每个消息传递这个脚本，这不是我要找的。我也尝试过setInterval，但是正如名字所说，它是间隔，所以消息可以在5秒钟内可见，或者如果它到达间隔时间的末尾，甚至可以

相关问答

jQuery隐藏/删除5秒后的DIV内容JQuery datepicker未更新.blur上的隐藏字段NG隐藏不隐藏空值在 JavaFX 中隐藏表jquery显示/隐藏不等待完成

相关文章

jQuery：获取jQuery中隐藏元​​素的高度Chrome中的jQuery返回“阻止”而不是“内联”jQuery-动态创建隐藏的表单元素jQuery选择更改显示/隐藏div事件如何检查jQuery中是否隐藏了元素？

相关阅读

TensorFlow感知器隐藏层Struts2 <s:hidden>隐藏值例子jQuery 选择器jQuery 选择器Linux查看文件或目录的隐藏属性（lsattr命令）

相关工具

Jquery表单验证插件隐语隐身专家jQuery的垂直SlideshowjQuery API 2.2.0 中文手册

相关文档

好用的中文速查表Linux-4.4-x86_64 内核配置选项Linux 内核引导选项简介你不懂JS：ES6与未来You Don't Need jQuery 中文版
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.