Как возвращает value <li>?

У меня есть два списка типа <ul>

ListaA ----------> lista todo los productos

ListaB ----------> lista los productos seleccionados a comprar

То, что я хочу сделать, состоит в том, чтобы возвращать value <li> выбранные, чтобы сохранять их в array и сохранять их в базе данных

<li value="4" style="list-style: none; width: 70%; margin: 6px; text-align: center; cursor: move; position: relative; z-index: 1; left: 0px; top: 0px;" class="list-group-item ui-sortable-handle" id="li">DELL</li>

Я загружаю listaA следующего способа:

self.ListaProductosA = ko.observableArray([]), 
    self.getListaProductosA = function () {
        $.ajax({
            url: '/Producto/ListaProducto',
            type: 'GET',
            dataType: 'JSON',
            contentType: 'application/json; charset = utf-8',
            success: function (data) {
                var html = '';
                $.each(data, function (key, item) {
                    self.ListaProductosA(data);
                    html += '<li value = ' + item.productoID + ' style="list-style:none; width:70%; margin:6px; text-align:center; cursor: move" class="list-group-item" id="li" >';
                    html += item.Descripcion;
                    html += '</li>';


                    $(document).ready(function () {
                        //Aplicar la función sortable a la lista con id listaConceptosA
                        // y conectarla con la lista de id listaConceptosB
                        $("#listaA").sortable({
                            connectWith: '#listaB'
                        });

                        //Aplicar la función sortable a la lista con id listaConceptosB
                        // y conectarla con la lista de id listaConceptosA
                        $("#listaB").sortable({
                            connectWith: '#listaA'
                        });
                    });

                });
                $("#listaA").html(html);     
            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    }

Мой вид в index - следующий:

      <div id="listBox">
        @*<div id="contentDrag">*@
        <h5> Lista de productos</h5>
        <ul id="listaA" class="form-control">
          <li>item</li>
        </ul>
        @*</div>*@

        @*<div id="contentDrop">*@
        <h5> Lista de productos seleccionados</h5>
        <ul id="listaB" class="form-control">
          @*<li></li>*@
        </ul>
        @*</div>*@

      </div>
0
задан 06.11.2019, 21:58
2 ответа

Если то, что ты желаешь, состоит в том, чтобы получать array списка так, что не использует элемент onclick, ты можешь делать одну funciГіn, который тебе возвратил array начиная с , пойдите из списка. Например:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>

</head>
<body>
    <ul id="list">
        <li value="1">Elemento1</li>
        <li value="2">Elemento2</li>
        <li value="3">Elemento3</li>
        <li value="4">Elemento4</li>
    </ul>

    <script type="text/javascript">

        function arrayFromList(id) {
            //Array con cada value:
            var dataValue = [...document.querySelectorAll(`#${id} li`)]
                .map(element => element.value);

            //Array con cada texto de la lista:
            var dataElement = [...document.querySelectorAll(`#${id} li`)]
                .map(element => element.innerText);     


            //console.log(dataValue);   // Array [1,2,3,4]
            //console.log(dataElement); // Array ["Elemento1","Elemento2","Elemento3","Elemento4"]

            return dataValue;
        }

        //Array que crearemos utilizando la función:
        var array = arrayFromList('list'); 

        console.log(array);

    </script>

</body>
</html>

funciГіn возвращает array, который в зависимости от array, который возвращается, может быть , оцените из каждого элемента списка или tambiГ©n текст каждого элемента списка .

Вывод из-за консоли в зависимости от array, что ты возвратил в ней funciГіn serГ - следующий array:

Array(4) [1,2,3,4]

или

Array(4) [ "Elemento1", "Elemento2", "Elemento3", "Elemento4" ]
0
ответ дан 01.12.2019, 12:30

Ты можешь делать это следующим способом, каждый раз, когда ты выбрал элемент списка, ejecutarГЎ функция aГ±adirArray () , в ней мы получим стоимость элемента с пойдите , которые мы будем желать, распределяя этот элемент в переменную и потом делая push глобальному array. Например:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script type="text/javascript">   

    //Array global, irá almacenando todos los elementos.
    var array = [];

    function añadirArray(){
        var elemento = document.getElementById("li").value;
        console.log(elemento); //IMPRIME: 4

        //Metiendo el elemento en un array global, cada vez que se haga click, se añadirá al array.
        array.push(elemento);
        console.log(array); //IMPRIME EL ARRAY, INCREMENTARÁ CUANTOS MÁS CLICKS.
    }


  </script>
</head>
<body>
    <ul>
        <li value="4" onclick="añadirArray()" id="li">DELL</li>
    </ul>
</body>
</html>

Таким образом каждый раз, когда мы кликнули не perderГЎn изменения, и array irГЎ увеличиваясь, aГ±adiendo в этот оцените из каждого элемента списка, что мы кликнули. Если ты хочешь увидеть пример с двумя списками, смоги быть что-то похожее на следующее:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script type="text/javascript">   

    //Array global, irá almacenando todos los elementos.
    var array = [];

    function añadirArray1(){
        var elemento = document.getElementById("li1").value;
        console.log(elemento); //IMPRIME: 4

        //Metiendo el elemento en un array global, cada vez que se haga click, se añadirá al array.
        array.push(elemento);
        console.log(array); //IMPRIME EL ARRAY, INCREMENTARÁ CUANTOS MÁS CLICKS.
    }
    function añadirArray2(){
        var elemento = document.getElementById("li2").value;
        console.log(elemento); //IMPRIME: 4

        //Metiendo el elemento en un array global, cada vez que se haga click, se añadirá al array.
        array.push(elemento);
        console.log(array); //IMPRIME EL ARRAY, INCREMENTARÁ CUANTOS MÁS CLICKS.
    }


  </script>
</head>
<body>
    <ul>
        <li value="4" onclick="añadirArray1()" id="li1">Elemento 1</li>
    </ul>
    <ul>
        <li value="7" onclick="añadirArray2()" id="li2">Elemento 2</li>
    </ul>
</body>
</html>

Результат вывода из-за консоли браузера, когда нажимает несколько раз первый elmento списка и второй случайным образом serГ - во что-то похожее на следующее:

7
Array [ 7 ]
4
Array [ 7, 4 ]
7
Array(3) [ 7, 4, 7 ]
4
Array(4) [ 7, 4, 7, 4 ]
7
Array(5) [ 7, 4, 7, 4, 7 ]
0
ответ дан 01.12.2019, 12:30
  • 1
    Они < li> не возможно распределять им событие onclick, единственный звук, тащивший в другой список. ¿ Habrí в другой способ посылать называть funció n каждый раз, когда присоединился один < li> в другой список? – Isa 07.11.2019, 20:04

Теги

Похожие вопросы