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>

演示：

＆＃13;

$(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
}

＆＃13;

.selected {
    color: red;
}

＆＃13;

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

＆＃13;

如何从ul中获取所选元素？

2 个答案: