ulから選択した要素を取得するには？

Question

私はフォームを作成しました。このフォームの一部は5つの要素を持つリストです。これらの要素はマウスで掴むことができます。ホバリングされた要素のクラスは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()); 
}); 

そして、あなたが選択したクラスをチェックする必要がある場合：あなたの<li>がどのように見える場合

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

Answer 2

は、このデモを試してみてくださいこれは：

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