Как возвращает 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>
Если то, что ты желаешь, состоит в том, чтобы получать 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" ]
Ты можешь делать это следующим способом, каждый раз, когда ты выбрал элемент списка, 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 ]
-
1Они < li> не возможно распределять им событие onclick, единственный звук, тащивший в другой список. ¿ Habrí в другой способ посылать называть funció n каждый раз, когда присоединился один < li> в другой список? – Isa 07.11.2019, 20:04