Question

我需要根据表单逻辑隐藏ul中的某些特定li元素，如下所示：如果某些文本框是空白的，则隐藏菜单中的特定li元素（ul）。问题是他们没有在li上使用id或类。请注意我的小提琴代码：`https://jsfiddle.net/u0dx0qpo/

这是整个逻辑，如果提到输入只是空白显示＆＃34;下载＆amp;打印应用程序＆＃34;和＆＃34; FAQS＆＃34;否则显示完整菜单。

这是我尝试使用的功能：

$(document).ready(function(){    
        if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
            // $('li').not('[title="Download &amp; Print Applications"]').hide();
        }
});

或者更好的是，我不知道是否可以根据标题之类的其他属性隐藏某些特定的li，例如：$('att:xx').hide();，因为我在同一页面中使用了另一个菜单＃39;想要影响或修改此代码...

Answer 1

如果您想使用jQuery隐藏或显示特定的<li>并且您没有使用ID或类，则可以使用jQuery的第n个子选择器。

例如，您可以使用

隐藏第三个

$('.weblinks-depth-1 li:nth-child(3)').hide();

https://api.jquery.com/nth-child-selector/

Answer 2

如果您使用的是jquery，则可以访问具有其他属性的元素：

$(document).ready(function(){    
        if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
          $('li').hide();
          $("li[data-sitemap-node='/knowledge-base/article/']").show();
          $("li[data-sitemap-node='/content/blank-page/']").show();      
        }
});

js fiddle

Answer 3

我更新了if语句中的一些id以确保代码执行并选择隐藏所有 li ，然后显示具有所需链接的那个。

$(document).ready(function(){
    if ($("#username").val() == "" 
       || $("#lastname").val() == "" 
       || $("#socialsecuritynumber").val() == "" 
       || $("#emailaddress1").val() == ""){
        $('li').hide();
        $('li > a[title="Download & Print Applications"]').parent().show();
    }
});

Answer 4

您现有的代码会发生一些事情，导致其无法正常运行：

定位title="FAQS"（复数），而不是title="FAQ"（单数）
目标HTML转发&，而不是&

针对a元素进行定位，然后隐藏父li

if ($("#firstname").val() == "" ||
    $("#lastname").val() == "" ||
    $("#socialsecuritynumber").val() == "" ||
    $("#emailaddress1").val() == "") {
  $('a').not('[title="Download & Print Applications"],[title="FAQS"]').parent().hide();
}

Here's the corrected JSFiddle

或者，如果您想在input元素发生更改时更新用户界面，则需要以下内容：

$("input").on('change', function() {
  if ($("#firstname").val() == "" ||
      $("#lastname").val() == "" ||
      $("#socialsecuritynumber").val() == "" ||
      $("#emailaddress1").val() == "") {
    $('a').not('[title="Download & Print Applications"],[title="FAQS"]').parent().hide();
  } else {
    $('li').show();
  }
});

else条件可确保 - 在评估时 - 重新显示之前隐藏的所有li元素。

Here's the corresponding JSFiddle

<强>更新：

关于明确定位DOM元素的每this comment，在给定original JSFiddle的情况下，您只需指定封闭的div class：

$('.navbar-left a').not('...')
...
$('.navbar-left li').show();

Answer 5

我先去检查一下输入类型＆＃34; text＆＃34;像这样骑自行车是空的：

$(document).ready(function(){
    function checkInputs(){
        var emptyInputs = false;
        $('input[type="text"]').each(function(element){
            if( $(this).val() ) {
                $('li a').not('[title="Download & Print Applications"]').hide();
                return;
            }
        });
    }

    $('input[type="text"]').on( 'keydown',function(){
        checkInputs();
    });
});

希望它有所帮助，利奥。

Answer 6

您可以使用过滤器:(将此文件放入文档或其他事件处理程序）您可能需要修改我使用的包装器div中的类;不知道你的其他菜单......

  if ($("#username").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == "") {
    $('.weblinks.navbar-left').find('li').filter(function() {
      return !$(this).find('[title*="Download & Print Applications"]').length && !$(this).find('[title*="FAQS"]').length;
    }).hide();
  }

显示/隐藏ul中的li元素

6 个答案: