HTML: JQuery как использовать JQuery для получения data-dk-dropdown-value

Question

Я пытаюсь сделать параметры выбора, и мне нужно изменить класс выбранного элемента, который выбран (при наведении курсора мыши), поэтому в основном я не веб-разработчик, поэтому я действительно не знаю, как добиться это, я пытался исследовать это, но мне не удалось.

Итак, мне нужно две вещи: когда пользователь наведет курсор на выбранное мнение, класс li изменится на dk_option_current, и как только пользователь нажмет на выбор, я могу сделать что-то в будущем, я действительно не Не знаю, как этого добиться, я могу использовать Javascript, но это просто большая работа, чтобы сделать это сам.

<div class="dk_container dk_theme_black dk_open" id="dk_container_arrow-tip" tabindex="1" style="display: block;">
  <a class="dk_toggle" style="width: 129px;">
    <span class="dk_label">TopHat 3D 60g</span>
  </a>
  <div class="dk_options">
    <ul class="dk_options_inner">
      <li class="dk_option_current"><a data-dk-dropdown-value="1">TopHat 3D 20g</a></li>
      <li class=""><a data-dk-dropdown-value="2">TopHat 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="4">TopHat 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="6">Brass 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="7">Brass 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="9">Brass Bullet 70g</a></li>
      <li class=""><a data-dk-dropdown-value="10">Brass Bullet 100g</a></li>
      <li class=""><a data-dk-dropdown-value="12">Steel Field 70g</a></li>
      <li class=""><a data-dk-dropdown-value="13">Steel Field 100g</a></li>
    </ul>
  </div>
</div>

Answer 1

Если вы действительно предпочитаете использовать mouseover вместо CSS :hover, вы можете сделать это следующим образом:

$(document).ready(function() {
   $(".dk_options_inner li").mouseover(function() {
      $(".dk_options_inner li").removeClass("dk_option_current");
      $(this).addClass("dk_option_current");
   });
   $(".dk_options_inner li").click(function() {
      $(".dk_options_inner li").removeClass("dk_option_current selected");
      $(this).addClass("dk_option_current selected");
      $(".dk_label").text($(this).text());
   });
});

.dk_option_current, .selected {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dk_container dk_theme_black dk_open" id="dk_container_arrow-tip" tabindex="1" style="display: block;"><a class="dk_toggle" style="width: 129px;"><span class="dk_label">TopHat 3D 20g</span></a>
  <div class="dk_options">
    <ul class="dk_options_inner">
      <li class="dk_option_current selected"><a data-dk-dropdown-value="1">TopHat 3D 20g</a></li>
      <li class=""><a data-dk-dropdown-value="2">TopHat 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="4">TopHat 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="6">Brass 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="7">Brass 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="9">Brass Bullet 70g</a></li>
      <li class=""><a data-dk-dropdown-value="10">Brass Bullet 100g</a></li>
      <li class=""><a data-dk-dropdown-value="12">Steel Field 70g</a></li>
      <li class=""><a data-dk-dropdown-value="13">Steel Field 100g</a></li>
    </ul>
  </div>
</div>