Question

我正在创建一个简单的购物清单。我想输入一个文本，说出什么是物品，然后是一个下拉框，以显示该商店所在的区域。当这两个部分都填写完后，我希望将文本添加为li相关的ul（根据商店所在的部分）。这是我的html：

  <!DOCTYPE html>
<html>
<head>
    <title>Shopping List</title>
    <link rel="stylesheet" type="text/css" href="assets/css/shoppingList.css">
    <script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"></script>
</head>
<body>

    <h1>Shopping List</h1>


    <input type="text" placeholder="Type Shopping Item Here">
    <select id="aisle">
        <option value="">Please choose a section</option>
        <option value="fruitAndVeg">Fruit and Veg</option>
        <option value="meatFridge">Meat Fridge</option>
        <option value="deliCounter">Deli Counter</option>
        <option value="dairy">Dairy</option>
    </select>

    <ul id="fruitAndVeg">
        <li>Apple</li>
        <li>Pear</li>
    </ul>

    <ul id="meatFridge">
        <li>Sausage</li>
        <li>Chicken</li>
    </ul>

    <ul id="deliCounter">
        <li>Ham</li>
        <li>Cheese</li>
    </ul>

    <ul id="dairy">
        <li>Milk</li>
        <li>Yoghurt</li>
    </ul>

    <ul id="other">
        <li>Sweets</li>
        <li>Chocolate</li>
    </ul>

<script type="text/javascript" src="assets/js/shoppingList.js"></script>
</body>
</html>

我可以使用jQuery向一个ul中添加li，但是如何根据下拉列表的值将其添加到正确的ul中？到目前为止，这是我的jQuery

    $("input[type='text']").keypress(function(event) {
    var value = $(this).val();
    if(event.which === 13){
        $(this).val("");
        $("#fruitAndVeg").append("<li>" + value + "</li>");
    }    
});

Answer 1

`$("input[type='text']").keypress(function(event) {
      var value = $(this).val();
      var option = $("#aisle").val()
      if(event.which === 13){
          $(this).val("");
          $("#" + option).append("<li>" + value + "</li>");
      } 
});`

Answer 2

请您试试这个。

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
    <!-- Getting all the cities of the travel -->
    <?php $collection_of_cities_by_travel = get_post_meta( get_the_ID(), 'city_visited', false ); ?>
    <?php if( $collection_of_cities_by_travel ) : ?>
        <ul class="slick-slider"> <!-- http://kenwheeler.github.io/slick/ 100% recomended-->
        <?php foreach ( $collection_of_cities_by_travel as $city ): $city_post = get_the_post( $city ); ?>
            <!-- Print the detail of every single city (post) in the travel -->
            <li class="slide">
                <a href="<?php echo get_the_permalink( $city_post->ID ); ?>">
                    <?php echo get_the_post_thumbnail( $city_post->ID, 'post-thumbnail' ); ?>
                    <?php echo get_the_title( $city_post->ID ); ?>
                </a>
            </li>
        <?php endforeach ?>
        </ul>
    <?php endif; ?>
<?php endwhile; ?>

Answer 3

尝试一下...

   $("#"+value).append("<li>" + value + "</li>");

Answer 4

您需要在change上监听select事件，以便同时使用所选值和input值附加到正确的列表中。例如：

const item = $('input');
const aisle = $('#aisle');

aisle.change(() => {
  let value = item.val();
  if (value) {
    $('#' + aisle.val()).append('<li>' + value + '</li>');
    item.val(''); // reset input
  }
});

<input type="text" placeholder="Type Shopping Item Here">
<select id="aisle">
  <option value="">Please choose a section</option>
  <option value="fruitAndVeg">Fruit and Veg</option>
  <option value="meatFridge">Meat Fridge</option>
  <option value="deliCounter">Deli Counter</option>
  <option value="dairy">Dairy</option>
</select>

<ul id="fruitAndVeg">
  <li>Apple</li>
  <li>Pear</li>
</ul>

<ul id="meatFridge">
  <li>Sausage</li>
  <li>Chicken</li>
</ul>

<ul id="deliCounter">
  <li>Ham</li>
  <li>Cheese</li>
</ul>

<ul id="dairy">
  <li>Milk</li>
  <li>Yoghurt</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="other">
  <li>Sweets</li>
  <li>Chocolate</li>
</ul>

文字输入和下拉框

4 个答案: