如果..，否则..在javascript中答案

【问题标题】：If..,else.. in javascript如果..，否则..在javascript中
【发布时间】：2021-01-19 04:58:17
【问题描述】：

我正在尝试使用 Javascript 中的 if-else 来解决我的问题。非常感谢您的帮助。

我想通过性别过滤姓名，同时将密钥 - woman / man 保存到本地存储。

但我不知道如何制作 if-else 子句。

有人可以帮我吗？

还有链接： https://drive.google.com/file/d/1RNJxbiU_DsFTCqGJWgxpepCgdOhGuzIj/view?usp=sharing

非常感谢，这对我来说意味着世界，我是新来的。 :-)

$(document).ready(function() {

  function displayName() {

    let safeNameVal = localStorage.getItem('woman');
    let safeName;

    if (safeNameVal) {
      safeName = JSON.parse(safeNameVal);
    } else {
      safeName = [];
    }

    //find list
    let nameUl = $('#list_2');
    nameUl.empty(); //.html('')

    //making list 
    $.each(safeName, function(key, name) {

      let nameLi = $('<li></li>');
      nameLi.text(name);

      //remove link
      let jmenoRemoveLink = $('<a href="#">x</a>');
      jmenoRemoveLink.click(function(e) {
        e.preventDefault();
        //name
        let safeNameVal = localStorage.getItem('woman');
        let safeName;
        if (safeNameVal) {
          safeName = JSON.parse(safeNameVal);
        } else {
          safeName = [];
        }
        //remove
        safeName.splice(key, 1);
        //safe name
        localStorage.setItem('woman', JSON.stringify(safeName));
        //display name
        displayName();
      });

      nameLi.append(jmenoRemoveLink);

      nameUl.append(nameLi);
    });

  }

  $('#formular').submit(function(e) {

    e.preventDefault();

    let zadaneJmeno = $('#name').val();
    if (zadaneJmeno) {
      //safe
      let safeNameVal = localStorage.getItem('woman');
      let safeName;

      if (safeNameVal) {
        safeName = JSON.parse(safeNameVal);
      } else {
        safeName = [];
      }
      safeName.push(zadaneJmeno);

      localStorage.setItem('woman', JSON.stringify(safeName)); /// ["Tom"]

      //list
      displayName();
      $('#name').val('');
    } else {
      // alert
      alert('please enter the name"');
      $('#name').focus();
    }

  });

  $('#removeAll').click(function() {
    localStorage.setItem('woman', '[]'); ///localStorage.setItem('woman', JSON.stringify([]));
    displayName();
  });


  displayName();

});

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

  <label for="name">Enter the name</label>
  <input type="text" id="name" required />
  <label for="section">Gender</label>

  <select name="selectSection" id="section" required>
    <option value="">---</option>
    <option value="man" id="man">man</option>
    <option value="woman" id="woman">woman</option>

  </select>
  <input type="submit" value="add" />
</form>

<button id="removeAll">Remove</button>

<div id="man_div">
  <h1>man:</h1>
  <ul id="list"></ul>

</div>


<div id="woman_div">
  <h1>woman:</h1>
  <ul id="list_2"></ul>

</div>

【问题讨论】：

您能否更清楚地了解您所面临的问题？我不太明白你的问题
我不知道如何在这里使用选项值来区分男性和女性。我试图做出 if-else 声明，但它不起作用。目前，如果我输入男性或女性名字，它将出现在“div woman”中，并且我在本地存储中只有一个女性的密钥。

标签： javascript html json if-statement local-storage

【解决方案1】：

我对您的脚本进行了一些更改，请注意，在解决您的问题时，我删除了点击时的“x”功能，因为它在解决您的问题时太冗长而无法阅读，请稍后再添加，并确保从正确的 localStorage 中删除。

$(document).ready(function () {

  function displayName() {
    //Separate the local storage into man and woman keys
    let manSafeNameVal = localStorage.getItem('man');
    let manSafeName;

    let womanSafeNameVal = localStorage.getItem('woman');
    let womanSafeName

    if (manSafeNameVal) {
      manSafeName = JSON.parse(manSafeNameVal);
    } else {
      manSafeName = [];
    }

    if (womanSafeNameVal) {
      womanSafeName = JSON.parse(womanSafeNameVal);
    } else {
      womanSafeName = [];
    }

    //find list
    //Use list and list_2 to display
    let manUl = $('#list');
    let womanUl = $('#list_2');
    manUl.empty(); //.html('')
    womanUl.empty();

    //list for man
    $.each(manSafeName, function (key, name) {
      let nameLi = $('<li></li>');
      nameLi.text(name);
      //do add back your 'x' remove here, because it is too verbose to read when I am trying to read the code
      manUl.append(nameLi);
    });

    //list for woman
    $.each(womanSafeName, function (key, name) {
      let nameLi = $('<li></li>');
      nameLi.text(name);
      //Also here, the 'x' for woman list
      womanUl.append(nameLi);
    });

  }

  $('#formular').submit(function (e) {

    e.preventDefault();

    let zadaneJmeno = $('#name').val();
    //get the selected gender, either man or woman
    let gender = $('#section').val();
    console.log(gender);
    console.log(zadaneJmeno);
    if (zadaneJmeno && gender !== "") {
      //safe into the localStorage of selected gender
      let safeNameVal = localStorage.getItem(gender);
      let safeName;

      if (safeNameVal) {
        safeName = JSON.parse(safeNameVal);
      } else {
        safeName = [];
      }

      safeName.push(zadaneJmeno);

      localStorage.setItem(gender, JSON.stringify(safeName));/// ["Tom"]

      //list
      displayName();
      $('#name').val('');

    } else {
      // alert
      alert('please enter the name"');
      $('#name').focus();
    }

  });

  $('#removeAll').click(function () {
    localStorage.setItem('woman', '[]');     ///localStorage.setItem('woman', JSON.stringify([]));
    displayName();
  });


  displayName();

});

【讨论】：

【解决方案2】：

 const katText = document.getElementById('txtKategorie');
            
            const oText=document.querySelector('input[homework="homework"]');
            // selektor tlačítka uložit úkol
            const oBttn=document.querySelector('input[type="submit"]');
            // selektor tlačítka na odstranění všech úkolů z kategorie
            const oDelete=document.querySelector('button#removeAll');
            
 
            const createlist=function(){
                let parent=document.getElementById('lists');

                Object.keys(localStorage).forEach(function (key) {
                    let category = key;
                    let div = document.createElement('div');
                    div.id = category;
                    let h1 = document.createElement('h1');
                    h1.textContent = category;
                    let ul = document.createElement('ul');

                    div.appendChild(h1);
                    div.appendChild(ul);
                    div.onclick = oznacDiv; 
                    parent.appendChild(div);
                });

                

                parent.querySelectorAll('div').forEach( div=>{
                    div.addEventListener('click',function(e){
                        // odstranění určité položky 
                        if( e.target!=e.currentTarget && e.target.tagName=='A') deleteitem( e );
                    });
                    
                    // při načtení stránky načíst úkoly z localStorage a vytvoření listu 
                    // podmmínka -- pokud není úložiště prázdné
                    let store=div.id;
                    if( localStorage.getItem(store)!=null )JSON.parse( localStorage.getItem( store ) ).forEach( homework=>{
                        addlistitem(homework,store);
                    })
                });
            }

            //na klik oznaci div
            function oznacDiv() {
                if (oBttn.disabled) oBttn.disabled = false;
                document.querySelectorAll('div.active').forEach(div => {
                    div.classList.remove('active')
                });
              
                document.querySelector('div#' + this.id).classList.add('active')
            }
            

            
            const clearstoreitems=function(category){
                localStorage.setItem( category, JSON.stringify([]) );
                document.querySelector( 'div#' + category ).querySelector('ul').innerHTML='';
            };
            
            
            
            
    
            
            
            const deleteitem=function(e){
                let parent=e.target.parentNode;
                let homework=parent.dataset.homework;
                let category=parent.dataset.category;
                parent.parentNode.removeChild(parent);
                
                let data=JSON.parse(localStorage.getItem(category));
                if( data!=null )data.splice(data.indexOf(homework),1);
                
                localStorage.setItem(category,JSON.stringify(data));
            };
            
            
            
            
            
            

            const addlistitem=function(homework,category){
                let p=document.createElement('button');
                   
                    p.innerHTML='  Uprava';
                    p.onclick =function(){ 
                                   editWorking(li);             
                    }
                
                let a=document.createElement('a');
                    a.href='#';
                    a.innerHTML='  Hotovo';            
                let li=document.createElement('li');
                    li.value=homework;
                    li.textContent=homework;
                    li.dataset.homework=homework;
                    li.dataset.category=category;
                    li.appendChild( a );
                    li.appendChild(p);
                
                document.querySelector( 'div#' + category ).querySelector('ul').appendChild( li );
            };
            
            

    
              function editWorking(e){
                 let editValue = prompt('Přejete si upravit úkol?', e.firstChild.nodeValue);
                 e.firstChild.nodeValue = editValue; 
                  
                 let parent=e.parentNode;
                 let homework=parent.dataset.homework;
                 let category=parent.dataset.category;
                  
                 addlistitem(editValue,category); 
                 addstoreitem(editValue,category);
                }       
            

            const addstoreitem=function(homework,category){
                let data=localStorage.getItem( category );
                
                if( data!=null ){
                    let json=JSON.parse( data );
                        json.push(homework);
                    data=JSON.stringify(json);
                }
                else 
                { 
                    data=JSON.stringify([homework]); 
                }
                
                localStorage.setItem( category, data );
                
            };
            
            
            
            //prida novej div s kategorii a poznamkou
            const addNewItemList = function () {
                let parent = document.getElementById('lists');
                let category = katText.value;
                        let div = document.createElement('div');
                        div.id = category;
                        let h1 = document.createElement('h1');
                        h1.textContent = category;
                        let ul = document.createElement('ul');
                        div.appendChild(h1);
                div.appendChild(ul);
                div.onclick = oznacDiv; 
                        parent.appendChild(div);
                parent.querySelectorAll('div').forEach(div => {
                    div.addEventListener('click', function (e) {
                        // odstranění určité položky 

                        if (e.target != e.currentTarget && e.target.tagName == 'A') deleteitem(e);
                    });

                    // při načtení stránky načíst úkoly z localStorage a vytvoření listu 
                    // podmmínka -- pokud není úložiště prázdné
                    let store = div.id;
                    if (localStorage.getItem(store) != null) JSON.parse(localStorage.getItem(store)).forEach(homework => {
                        addlistitem(homework, store);
                    })
                });
            }

            
            
            
            
            
            oBttn.addEventListener('click',function(e){
                e.preventDefault();
                if (oText.value != '') {
                    if (katText.value != '') {

                        if (document.querySelector('div#' + katText.value) == null) {
                            addNewItemList()
                        }
                        addlistitem(oText.value, katText.value);
                        addstoreitem(oText.value, katText.value);
                        oText.value = '';
                        return true;
                    } else {
                        alert('Zadejte kategorii prosím...');
                    }
                } else {
                    alert('Zadejte úkol prosím...');
                }
            });
        
            
            
            
   
           
            
            
            // vymazat, resetovat pole
            oDelete.addEventListener('click', function (e) {
                document.querySelectorAll('div.active').forEach(div => {
                    //clearstoreitems(document.querySelectorAll('div.active').id);
                    clearstoreitems(div.id);
                    //div.classList.remove('active')
                });
                
            });
            
            

            
            createlist();

@charset "UTF-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    padding: 100;
    margin: 100;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/**styly pro tělo celé aplikace **/
body{
    background: rgb(131,58,180);
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
   /* background: linear-gradient(139deg, rgba(193,62,62,1) 0%, rgba(230,179,50,1) 100%); 
    background-image: url("pozadi.png");*/
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100%; 
}


.weather{
    width: 100%;
    margin: 20px;
    padding: 30px;
    
}



/** pomohla jsem si tady https://the-echoplex.net/flexyboxes/ **/
/**
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
     -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 100 auto;
    -ms-flex: 0 100 auto;
    flex: 0 100 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    
    }
**/

/**nadpis aplikace **/
#nadpis {
    /** margin: auto; 
    width: 50%;
    
    padding: 5px; **/
    text-align: center;
    font-size: 40px;
}

.predpoved {
/** width: 30%; **/
    border-radius: 15px 50px;
    border:4px solid white;
    background: black;
    -webkit-box-shadow: 7px 8px 6px 0px rgba(0,0,0,0.52); 
                box-shadow: 7px 8px 6px 0px rgba(0,0,0,0.52);
    
    
    margin:0 auto;
    height: 10%;
    width:60%;
    padding: 0 auto;
    
    
    
}

.nadpis_1{
    
    font-size: 50px;
    color:white;
    font:bold;

    
}





label{
    color:white;
    font:oblique;
    text-transform:inherit;
    
}


 #lists > div{
                padding:1rem;
                margin:1rem auto;
                border-radius: 15px 50px;
                border:4px solid white;
                margin-left: 30px;
                margin-right: 30px;
                -webkit-box-shadow: 7px 8px 6px 0px rgba(0,0,0,0.52); 
                box-shadow: 7px 8px 6px 0px rgba(0,0,0,0.52);
            }
            .active{
               background: linear-gradient(90deg, rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1)100%);
              
                
            }
            h1{
                text-transform:capitalize;
                color:white;
}
            ul{
                list-style: square;

            }
            ul li{

                color:white;
                margin-top: 40px;
                font-size: 20px;

            }
            ul a {

                color:white;
                font:oblique;
                
                padding: 10px;
                margin:10px;
                margin-left:100px;
                border-radius: 15px ;
                border:1px solid white;
                text-decoration: none;
                text-transform: uppercase;

            }
    ul a:hover {

                color:white;
                font:oblique;
                background:rgba(252,176,69,1);
                padding: 10px;
                margin:10px;
                margin-left:100px;
                border:1px solid white;
                text-decoration: none;
                text-transform: uppercase;

            }



form{
    
    color: white;
    padding: 20px;
    width: 600px;
    margin: 0 auto;
    height: auto;

}

#removeAll{
    
    color:white;
    font:oblique;
    background: black;
    border-radius: 15px ;
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 auto;
    height: auto;
    padding:10px;
    margin-left: 30px;
    margin-right: 30px;
    
    
}

#removeAll:hover {
    
    color:white;
    font:oblique;
    background: red;                
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    padding:10px;
    margin: 0 auto;
    height: auto;
    margin-left: 30px;
    margin-right: 30px;
    
    
}
#refresh{
    
    color:white;
    font:oblique;
    background: black;
    border-radius: 15px ;
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 auto;
    height: auto;
    padding: 10px;
    
    
    
}

#refresh:hover {
    
    color:white;
    font:oblique;
    background: red;                
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    padding:10px;
    margin: 0 auto;
    height: auto;
    
    
    
}
#safe{
    
    color:white;
    font:oblique;
    background: black;
    border-radius: 15px ;
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 auto;
    height: auto;
    padding: 10px;
    
    
    
}

#safe:hover {
    
    color:white;
    font:oblique;
    background: red;                
    border:1px solid white;
    text-decoration: none;
    text-transform: uppercase;
    padding:10px;
    margin: 0 auto;
    height: auto;
    
    
    
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Deadline</title>
         <link rel="stylesheet" href="style.css"> 
         <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
       
    </head>
    <body>
        <div class="flex-container">
            
        <div id="nadpis">
        <h1>Deadline</h1>
    
    
        <form>
        
        
            <label for="txtHomework">Your homework.. </label>
            <input type="text" id="txtHomework" homework="homework" required />
          
            
          <label for="txtKategorie">Category</label>
            <input type="text" id="txtKategorie" kategorie="valKategorie" required />
              <!--<select name="selectSection" required>
                <option selected hidden disabled>---</option>
                <option value="škola">Škola</option>
                <option value="Práce">Práce</option>
                <option value="Doma">Doma</option>
                <option value="Jiné">Jiné</option>
                
              </select>-->
          <!--</label>-->
                
          <!-- tlačítko uložit je nedostupné dokud nevybereme kategorii a nezapíšeme úkol -->
          <input id ="safe" type="submit" value="Uložit" />
        </form>

        
        <div id="lists"></div>
        
        <button id="removeAll">Vyčistit kategorii</button>

【讨论】：

【解决方案3】：

我知道你已经有了一个解决方案，但我提供了一个替代方案，在 vanilla Javascript 而不是 jQuery 中，它根据性别拆分名称 - 根据性别将它们分配到 localStorage 中的各个区域，并具有删除个人的功能来自商店的物品。存储在任何生成的商店中的任何项目都将用于在页面加载时填充 HTML 列表。我不使用 jQuery，这就是为什么我用纯 js 编写这个 - 毫无疑问，你可以从中挑选一些可能有用的东西 - 我希望它无论如何都是有用的。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Gender splitter</title>
        <style>
            #lists > div{
                padding:1rem;
                margin:1rem auto;
                border:1px dotted gray;
            }
            .active{
                background:whitesmoke
            }
            h1{text-transform:capitalize}
        </style>
    </head>
    <body>
        <form>
          <label>Enter the name
            <input type='text' name='name' required />
          </label>
          <label>Gender
              <select name='selectSection' required>
                <option selected hidden disabled>---
                <option value='male'>Male
                <option value='female'>Female
                <option value='teapot'>Teapot
                <option value='crocodile'>Crocodile
              </select>
          </label>
          <!-- initially disabled to prevent adding when no gender is selected -->
          <input type='submit' value='add' disabled />
        </form>

        <button id='removeAll'>Remove</button>
        <div id='lists'></div>
        
        
        
        
        
        <script>
            const oSelect=document.querySelector('select[name="selectSection"]');
            const oText=document.querySelector('input[name="name"]');
            const oBttn=document.querySelector('input[type="submit"]');
            const oDelete=document.querySelector('button#removeAll');
            
            
            // generate the necessary HTML nodes to display names/genders based
            // upon the options in the select menu.
            const createlist=function(){
                let parent=document.getElementById('lists');
                oSelect.querySelectorAll('option').forEach( option=>{
                    if( option.value !== oSelect.childNodes[1].value ){
                        let gender=option.value;
                        let div=document.createElement('div');
                            div.id=gender;
                        let h1=document.createElement('h1');
                            h1.textContent=gender;
                        let ul=document.createElement('ul');
                        
                        div.appendChild(h1);
                        div.appendChild(ul);
                        
                        parent.appendChild( div );
                    }
                });
                
                parent.querySelectorAll('div').forEach( div=>{
                    div.addEventListener('click',function(e){
                        // delete specific item from the store
                        if( e.target!=e.currentTarget && e.target.tagName=='A') deleteitem( e );
                    });
                    
                    // load any names from the store on page load and recreate the lists
                    let store=div.id;
                    if( localStorage.getItem(store)!=null )JSON.parse( localStorage.getItem( store ) ).forEach( name=>{
                        addlistitem(name,store);
                    })
                });
            }
            
            // erase store content by gender and clear html list display
            const clearstoreitems=function(gender){
                localStorage.setItem( gender, JSON.stringify([]) );
                document.querySelector( 'div#' + gender ).querySelector('ul').innerHTML='';
            };
            
            // delete specific item from particular store
            const deleteitem=function(e){
                let parent=e.target.parentNode;
                let name=parent.dataset.name;
                let gender=parent.dataset.gender;
                parent.parentNode.removeChild(parent);
                
                let data=JSON.parse(localStorage.getItem(gender));
                if( data!=null )data.splice(data.indexOf(name),1);
                
                localStorage.setItem(gender,JSON.stringify(data));
            };
            
            // add new item to HTML list based upon gender
            const addlistitem=function(name,gender){
                let a=document.createElement('a');
                    a.href='#';
                    a.innerHTML='X';            
                let li=document.createElement('li');
                    li.value=name;
                    li.textContent=name;
                    li.dataset.name=name;
                    li.dataset.gender=gender;
                    li.appendChild( a );
                
                document.querySelector( 'div#' + gender ).querySelector('ul').appendChild( li );
            };
            
            // add new name to the localStorage in gender specific named store
            const addstoreitem=function(name,gender){
                let data=localStorage.getItem( gender );
                if( data!=null ){
                    let json=JSON.parse( data );
                        json.push(name);
                    data=JSON.stringify(json);
                } else { data=JSON.stringify([name]); }
                localStorage.setItem( gender, data );
            };
            
            // Add new item listener
            oBttn.addEventListener('click',function(e){
                e.preventDefault();
                if( oText.value!='' ){
                    addlistitem(oText.value,oSelect.value);
                    addstoreitem(oText.value,oSelect.value);
                    oText.value='';
                    return true;
                }
                alert('Name please...');
            });
            
            oSelect.addEventListener('change',function(e){
                // ensure the "Add" button is enabled
                if( oBttn.disabled )oBttn.disabled=false;
                document.querySelectorAll('div.active').forEach( div=>{
                    div.classList.remove('active')
                });
                
                // assign a class to visually identify which gender is selected
                document.querySelector( 'div#' + this.value ).classList.add('active')
            });
            
            
            // erase this entire store - reset to empty array
            oDelete.addEventListener('click',function(e){
                clearstoreitems(oSelect.value);
            });
            
            

            
            createlist();
        </script>
    </body>
</html>

【讨论】：

谢谢。也许你的版本更适合我。非常感谢先生。 :-)
上面可以很容易地修改，以允许无限数量的性别，只需很少的额外代码。我会更新这个
你好心……你能解释一下这些台词吗？ oSelect.querySelectorAll('option').forEach( option=>{ if( option.value !== oSelect.childNodes[1].value ){
select 菜单中的第一个选项不应在 javascript 函数中使用，因为它没有任何值。由于selected hidden disabled 属性，无论如何都不应该选择它，但是if( option.value !== oSelect.childNodes[1].value ){ 这一行明确表示“除此之外的所有内容”..
有没有办法重新创建这个应用程序以允许用户创建自己的类别？你能帮我么？非常感谢