Question

如何根据条件动态添加和删除？我尝试了以下代码，但它无法正常工作。我试图在页面加载时这样做。我将使用隐藏输入从模板发送true或false。如果为true，则添加选项卡，否则使用jquery删除脚本中的选项卡。任何人都可以告诉我。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
    <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
    <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
    <li style='float: right;'>
        <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
    </li>

</ul>
<input type="hidden" name="override" id="override" value="true">


var override= $('#override').val();

if(override){
    $('ul.nav').append(" <li><a data-toggle='tab' href='#menu2' class='tab-heading' id='overridecanges'>Researcher</a></li>");
}else{
    $('#overridecanges').remove();
}

Answer 1

问题是var override = $('#override').val(); if (override =="true") { $('ul.nav').append("<li id='#overridecanges'><h1>Cancer information</h1></li>"); } else { $('ul.nav').find('#overridecanges').remove(); }并与字符串进行比较。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
  <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
  <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
  <li style='float: right;'>
    <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
  </li>

</ul>
<input type="hidden" name="override" id="override" value="true">

＆＃13;

var override = $('#override').val();
if (override=="true") {
  $('ul.nav').append("<li id='#overridecanges'><h1>Cancer information</h1></li>");
} else {
  $('ul.nav').find('#overridecanges').remove();
}

＆＃13;

错误

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
  <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
  <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
  <li style='float: right;'>
    <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
  </li>

</ul>
<input type="hidden" name="override" id="override" value="false">

＆＃13;

$.ajax({
        type:"POST",
        url:"system_setting.php?p=add",
        data:"username="+username+"&password="+password+"&nickname="+nickname+"&authority="+authority,
        success:function(data){
            viewData();
        }
    });

＆＃13;

Answer 2

不是插入/移除它 - 而是一直在那里使用它，只需根据您的情况隐藏/显示它。在下面 - 我完全省去了隐藏的输入，只需在按钮点击时切换它。

显然缺乏样式，我不得不将内联和h1显示为内联，但这比每次条件更改时尝试操作DOM更好。说实话 - 如果我这样做 - 我会在li中添加/删除一个类来显示/隐藏它 - 但是.toggle（）在jquery-land中完成了这个。

＆＃13;

$('#toggleButton').click(function(){
    $('#overridecanges').toggle();
})

＆＃13;

#overridecanges {display:none}
li, h1 {display: inline}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
    <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
    <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
    <li id='overridecanges'><h1>Cancer information</h1></li>
    <li style='float: right;'>
        <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
    </li>

</ul>

<button type="button" id="toggleButton">Click Me to Toggle It</button>

＆＃13;

Answer 3

在你的情况下，$(this).find('ul.nav')不会指向ul里面的任何li。

我的要求不够明确，

但是任何方式让我们假设在加载页面时我想执行以下代码：

注意： - if（override）将始终为true，因为override总是一个字符串值，即＆＃39; true＆＃39;或者＆＃39; false＆＃39;

$(document).ready(function(){
   var override= $('#override').val();

    if(override=='true'){

        $('ul.nav.nav-tabs').closest('ul.nav').append("<li id='overridecanges'><h1>Cancer information</h1></li>"); 
    }else{
        $('#overridecanges').remove();
    }

});

＆＃13;

$(document).ready(function(){
   var override= $('#override').val();
   
    if(override=='true'){
    
        $('ul.nav.nav-tabs').closest('ul.nav').append("<li id='overridecanges'><h1>Cancer information</h1></li>"); 
    }else{
        $('#overridecanges').remove();
    }
    
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
    <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
    <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
  
    
    <li style='float: right;'>
        <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
    </li>

</ul>
<input type="hidden" name="override" id="override" value="false">
    

</body>
</html>

＆＃13;

如何基于变量动态添加/删除li标签

3 个答案: