2016-11-01 4 views
0

Я создал форму, и часть этой формы - это список, состоящий из пяти элементов. Эти элементы можно навести мышью. Зависшие элементы имеют класс selected. Вопрос в том, как я могу принять значение этих элементов, чтобы отправить его на сервер?Как получить выбранные элементы из ul?

<ul id="service" class="icon-group booking-item-rating-stars"> 
    <li id="1"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="2"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="3"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="4"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="5"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
</ul> 
+2

Вы, кажется, случайно ваш код, однако этот селектор: '$ ('li.selected')' и 'карты()' функция должна делать то, что вам нужно , –

+0

Теперь вы обновили вопрос, чтобы содержать HTML, какое значение вы хотите отправить? 'Id' элементов' li'? –

+0

document.getElementById ("") .value? –

ответ

0

Если я понимаю, что вы исправить это то, что вам нужно:

$('#service li').on('hover', function() { 
    sendToServer($(this).text()); 
}); 

И если вам нужно проверить выбранный класс:

$('#service li').on('hover', function() { 
    var $this = $(this); 
    if ($this.hasClass('selected')) { 
     sendToServer($this.text()); 
    } 
}); 
0

Попробуйте демо, если ваш <li> выглядит это:

<li> 
    <input type="hidden" id="3" value="3"> 
    <i class="fa fa-smile-o">c</i></li> 
<li> 

демо:

$(function() { 
 
    $('#service li').hover(function() { 
 
     $(this).addClass('selected'); // add selected class on hover 
 
     var data = $(this).find(':hidden').val(); // get input hidden value inside the li 
 
     sendToServer(data); // call send to server function passing data variable 
 
    }, function() { 
 
     $(this).removeClass('selected'); 
 
    }); 
 
}); 
 

 

 

 

 
function sendToServer(data) { 
 
    console.log(data); 
 
    // insert send to server program here 
 
}
.selected { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="service" class="icon-group booking-item-rating-stars"> 
 
    <li> 
 
     <input type="hidden" id="1" value="1"> 
 
     <i class="fa fa-smile-o">a</i></li> 
 
    <li> 
 
     <input type="hidden" id="2" value="2"> 
 
     <i class="fa fa-smile-o">b</i></li> 
 
    <li> 
 
     <input type="hidden" id="3" value="3"> 
 
     <i class="fa fa-smile-o">c</i></li> 
 
    <li> 
 
     <input type="hidden" id="4" value="4"> 
 
     <i class="fa fa-smile-o">d</i></li> 
 
    <li> 
 
     <input type="hidden" id="5" value="5"> 
 
     <i class="fa fa-smile-o">e</i></li> 
 

 
</ul>

Смежные вопросы