如何从ul获取选定的元素？

Question

我已经创建了一个表单，该表单的一部分是包含五个元素的列表。 这些元素可以通过鼠标悬停。 悬停的元素具有selected类。 问题是我该如何获取这些元素的值以将其发送到服务器？

<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>

Answer 1

如果我了解您的要求，这就是您所需要的：

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

如果您需要检查选定的班级：

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

Answer 2

如果您的<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>