0

リストに材料を追加するたびに、小さなテキスト ボックスを配置したいのですが、助けてください。すぐ隣にあるので、数量を置けます。誰かが私を助けることができますか？
html は次のとおりです。

<html>
    <head>
    <title>Ingredient</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/receta.min.css" />
    <link rel="stylesheet" href="themes/receta.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script src="js/recetas.js">  </script>  

<body>
    <label for="receta">Nombre Receta:</label><br>
    <input type="text" name="receta" value="" maxlength="20" /><br>

<h1>INGREDIENTES</h1>
<ul>

</ul>
<select onchange="selectIngredient(this);">
    <option value="Cheese">Cheese</option>
    <option value="Olives">Olives</option>
    <option value="Pepperoni">Pepperoni</option>
    <option value="Milk">Milk</option>
</select>
<button>GUARDAR</button>    
<li><a href="resumen.html" data-transition="none" rel="external">testing2</a></li>
</body>
</html>

テキストボックスを配置できるように変更する方法がわからないjsは次のとおりです。

    function selectIngredient(select)
        { 
          var $ul = $(select).closest('.ui-select').prev('ul');
    console.log($ul[0])
      if ($ul.find('input[value=' + $(select).val() + ']').length == 0) {
        console.log('s')
            $ul.append('<li onclick="$(this).remove();">' +
              '<input type="hidden" name="ingredients[]" value="' + 
              $(select).val() + '" /> ' +
              $(select).find('option:selected').text() + '</li>');
      }
        }
4

2 に答える 2

1

私が正しく理解しているかどうかはわかりませんが、あなたのコードで見たのは、入力が非表示であり、リストから削除されていることです。非表示のプロパティを削除し、成分の名前をスパンに配置してそこに削除機能を設定し、id を成分という名前の ul に設定します。

コードは次のとおりです。

$("#addIng").change(function(){
      var $ul = $("#ingredientes");
console.log($ul[0])
  if ($ul.find('input[value=' + $(this).val() + ']').length == 0) {
    console.log('s')
        $ul.append('<li>' +
          '<input name="ingredients[]" value="' + 
          $(this).val() + '" /> <span onclick="$(this).parent().remove();">' +
          $(this).find('option:selected').text() + '</span></li>');
      }

});

jsfiddle

于 2012-11-16T17:50:38.143 に答える
0

あなたのhtmlにはいくつか問題がありますが、それはあなたの質問に答えて、あなたが作業を続けるのを助けるためです.

function selectIngredient(select)
{ 
  var ul = $("ul");
  if (ul.find('input[value=' + $(select).val() + ']').length == 0) 
  {
    var li = '<li><input type="hidden" name="ingredients[]" value="' + $(select).val() + '" /> ' + $(select).find('option:selected').text() + '<input type="text" name="quantity[]" value="0" />' + '<a onclick="$(this).parent().remove();"> Remove </a> </li>';
    ul.append(li);
  }
}

これは機能するはずですが、リストに id またはクラスを指定する必要があります。これにより、見つけやすくなります。このコードは、ページ全体のすべてのリストに項目を追加します。

とにかくお役に立てば幸いです。

于 2012-11-16T17:49:40.453 に答える