Question

我正在创建一个case / break循环来改变创建新li的内容。我已经非常接近但是当我更改变量以重新分配li应该将值存储在变量堆栈中时。最终你只能将li添加到每个ul中，有一个选项。

这是HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Tammudu" 
rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.9.1.min.js"></script>
    <script type="text/javascript" 
src="file:///C:/Users/Will/Desktop/JS_Test/script.js"></script>
</head>
<body>
    <div class=app>
        <div id=menu_container> <div id=menu_title> Menu </div>


            <input id="ListInput" /></input>

            <button id="AddToList">Add</button>

            </input>
              <select id="GroceryType" list=hosting-plan>
              <option>Select</option>
              <option name=produce value=1>Produce</option>
              <option name=baking value=2>Baking</option>
                <option name=meat value=3>Meat</option>
                <option name=dairy value=4>Dairy</option>
                <option name=frozen value=5>Frozen</option>
                <option name=etc value=6>Etc</option>

              </select>
        </div>


        <div id=list_container><div id=list_title> Grocery List </div>

        <div class=sublist_container>  

          <ul id="Produce">
Produce
          </ul>

          <ul id="Baking">
Baking
          </ul>

          <ul id="Meat">
Meat
          </ul>

          <ul id="Dairy">
Dairy
          </ul>

          <ul id="Frozen">
Frozen
          </ul>

          <ul id="Etc">
Etc
          </ul>

            </div>
        </div>             
    </div>
</body>

然后是剧本：

$(document).ready(function () {
$("#GroceryType").change(function () {
    let val = $(this).val();
    console.log(val);

    switch (val) {
        case '1':
        $('#AddToList').click(function(){
        $('#Produce').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

         break;

        case '2':
        $('#AddToList').click(function(){
        $('#Baking').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

         break;

         case '3':
        $('#AddToList').click(function(){
        $('#Meat').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

        break;

        case '4':
        $('#AddToList').click(function(){
        $('#Dairy').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });


        break;

        case '5':
        $('#AddToList').click(function(){
        $('#Frozen').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });


        break;

        case '6':
        $('#AddToList').click(function(){
        $('#Dairy').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

    } 
});

}）;

最后是一些CSS：

            .app{
                width: 100%;
                height: 1400px;
                background-color: #d3c9bc;
                position:relative;

            }

            #menu_container, #list_container{
                position: absolute;
                top: 10em;
                width: 25em;
                    padding: 1em;
                background-color: #e59b80;
            }

            #menu_container{
                position:relative;
                left: 30%;
                height: 5em;
                top: 2em;

            }

            #menu_title{
                background-color: #e5e580;
                position: absolute;
                width:40%;
                left:32%;
                text-align:center;
            }

            #AddToList{
                position: absolute;
                top: 40%;
                left:10%;
            }

            #ListInput{
                position:absolute;
                top: 40%;
                left: 20%;
                width:60%;
            }

            #GroceryType{
                position: absolute;
                bottom: 15%;
                left:15%;

            }

            #list_title{
                background-color: #e5e580;
                position: absolute;
                width:40%;
                left:32%;
                text-align:center;
            }

            #list_container{
                top: 10em;
                left: 30%;
                min-height: 40em;
                max-height: 200em;
            }

            #Produce, #Meat, #Baking, #Dairy, #Frozen, #Etc{
                min-width: 10em;
                min-height:1em;
                background-color: #9fe580;
                overflow-wrap: break-word;
                word-break: break-word;
                word-wrap: break-word;
                hyphens: auto;

            }

            .sublist_container{
                position: absolute;
                top: 15%;
                left: 10%;
                height: 30em;
                width: 75%;
                background-color: #80e5b2;
            }

它几乎可以工作，但我需要列表类型的变量一次只处理事件1选项。

Answer 1

您需要在更改之前删除click事件，这就是堆叠的原因。我还改变了附加参数的外观......

试试这个：

＆＃13;

http://services.odata.org/V4/Northwind/Northwind.svc/Employees/?$filter=contains(toupper(FirstName),%27C%27)

http://services.odata.org/V4/Northwind/Northwind.svc/Employees/?$filter=contains(tolower(FirstName),%27C%27)

＆＃13;

$(document).ready(function() {
  $("#GroceryType").change(function() {
    let val = $(this).val();
    console.log(val);
    $('#AddToList').off('click');//this is new
    switch (val) {
      case '1':
        $('#AddToList').click(function() {
          $('#Produce').append('<li>'+$('#ListInput').val()+'</li>');//these all changed but can be done many ways
        });

        break;

      case '2':
        $('#AddToList').click(function() {
          $('#Baking').append('<li>'+$('#ListInput').val()+'</li>');
        });

        break;

      case '3':
        $('#AddToList').click(function() {
          $('#Meat').append('<li>'+$('#ListInput').val()+'</li>');
        });

        break;

      case '4':
        $('#AddToList').click(function() {
          $('#Dairy').append('<li>'+$('#ListInput').val()+'</li>');
        });


        break;

      case '5':
        $('#AddToList').click(function() {
          $('#Frozen').append('<li>'+$('#ListInput').val()+'</li>');
        });


        break;

      case '6':
        $('#AddToList').click(function() {
          $('#Dairy').append('<li>'+$('#ListInput').val()+'</li>');
        });
    }
  });
});

＆＃13;

.app {
  width: 100%;
  height: 1400px;
  background-color: #d3c9bc;
  position: relative;
}

#menu_container,
#list_container {
  position: absolute;
  top: 10em;
  width: 25em;
  padding: 1em;
  background-color: #e59b80;
}

#menu_container {
  position: relative;
  left: 30%;
  height: 5em;
  top: 2em;
}

#menu_title {
  background-color: #e5e580;
  position: absolute;
  width: 40%;
  left: 32%;
  text-align: center;
}

#AddToList {
  position: absolute;
  top: 40%;
  left: 10%;
}

#ListInput {
  position: absolute;
  top: 40%;
  left: 20%;
  width: 60%;
}

#GroceryType {
  position: absolute;
  bottom: 15%;
  left: 15%;
}

#list_title {
  background-color: #e5e580;
  position: absolute;
  width: 40%;
  left: 32%;
  text-align: center;
}

#list_container {
  top: 10em;
  left: 30%;
  min-height: 40em;
  max-height: 200em;
}

#Produce,
#Meat,
#Baking,
#Dairy,
#Frozen,
#Etc {
  min-width: 10em;
  min-height: 1em;
  background-color: #9fe580;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.sublist_container {
  position: absolute;
  top: 15%;
  left: 10%;
  height: 30em;
  width: 75%;
  background-color: #80e5b2;
}

＆＃13;

Answer 2

每次执行交换机中的任何情况时，都会将其他事件绑定到#AddToList。所以你最终会有一堆事件，同时全部开火。

快速解决方法是在添加新事件之前取消绑定现有事件：

case '1':
    $('#AddToList').off().on('click',function(){
        $('#Produce').append($('<li>', {
            text: $('#ListInput').val()
        }));
    });
    break;

我本来也试图写一些更干净的代码。你一遍又一遍地重复相同的代码，你可以将代码分解为一个函数：

function addToList(elementId) {
    $('#AddToList').off().on('click',function(){
        $('#'+elementId).append('<li>'+$('#ListInput').val()+'</li>');
    });
}

然后你的开关看起来像这样：

case '1':
    addToList("Produce");
    break;
case '2':
    addToList("Baking");
    break;
case '3':
    addToList("Meat");
    break;
case '4':
    addToList("Dairy");
    break;
case '5':
    addToList("Frozen");
    break;
case '6':
    addToList("Etc");
    break;

您看到您的代码现在如何更清晰，更易于阅读？现在，您可以在一个地方而不是多个地方更新代码。

Answer 3

您可以尝试重写问题陈述。我几乎跟着但不完全确定我理解你。除非你弄明白，否则会尽力提供帮助。

Answer 4

使用数组操作删除了开关盒。还修复了事件以监听添加按钮单击事件而不是下拉更改事件。运行以下代码段以检查输出。

＆＃13;

$(document).ready(function() {
  $("#AddToList").on("click", function() {
    let val = $("#GroceryType").val();
    var ar = ["#Produce", "#Baking", "#Meat", "#Dairy", "#Frozen", "#Dairy"];
    var pos = parseInt(val);
    $item_name = $('#ListInput').val();
    $(ar[pos - 1]).append("<li>" + $item_name + "</li>");
  });
});

＆＃13;

.app {
  width: 100%;
  height: 1400px;
  background-color: #d3c9bc;
  position: relative;
}

#menu_container,
#list_container {
  position: absolute;
  top: 10em;
  width: 25em;
  padding: 1em;
  background-color: #e59b80;
}

#menu_container {
  position: relative;
  left: 30%;
  height: 5em;
  top: 2em;
}

#menu_title {
  background-color: #e5e580;
  position: absolute;
  width: 40%;
  left: 32%;
  text-align: center;
}

#AddToList {
  position: absolute;
  top: 40%;
  left: 10%;
}

#ListInput {
  position: absolute;
  top: 40%;
  left: 20%;
  width: 60%;
}

#GroceryType {
  position: absolute;
  bottom: 15%;
  left: 15%;
}

#list_title {
  background-color: #e5e580;
  position: absolute;
  width: 40%;
  left: 32%;
  text-align: center;
}

#list_container {
  top: 10em;
  left: 30%;
  min-height: 40em;
  max-height: 200em;
}

#Produce,
#Meat,
#Baking,
#Dairy,
#Frozen,
#Etc {
  min-width: 10em;
  min-height: 1em;
  background-color: #9fe580;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.sublist_container {
  position: absolute;
  top: 15%;
  left: 10%;
  height: 30em;
  width: 75%;
  background-color: #80e5b2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Tammudu" rel="stylesheet">


</head>

<body>
  <div class=app>
    <div id=menu_container>
      <div id=menu_title> Menu </div>
      <input id="ListInput" /></input>
      <button id="AddToList">Add</button>
      </input>
      <select id="GroceryType" list=hosting-plan>
		<option>Select</option>
		<option name=produce value=1>Produce</option>
		<option name=baking value=2>Baking</option>
		<option name=meat value=3>Meat</option>
		<option name=dairy value=4>Dairy</option>
		<option name=frozen value=5>Frozen</option>
		<option name=etc value=6>Etc</option>
	</select>
    </div>
    <div id=list_container>
      <div id=list_title> Grocery List </div>
      <div class=sublist_container>
        <ul id="Produce">
          Produce
        </ul>
        <ul id="Baking">
          Baking
        </ul>
        <ul id="Meat">
          Meat
        </ul>
        <ul id="Dairy">
          Dairy
        </ul>
        <ul id="Frozen">
          Frozen
        </ul>
        <ul id="Etc">
          Etc
        </ul>
      </div>
    </div>
  </div>
</body>

＆＃13;

jquery切换以更改附加的列表

4 个答案: