javascript - HTML: JQuery 如何使用JQuery获取data-dk-dropdown-value

Question

我正在尝试制作选择选项，并且需要更改所选项目的类(鼠标悬停时)，所以基本上我不是网络开发人员，所以我真的不知道如何实现这个，我一直在尝试研究这个，但没有成功。

所以我需要两件事，一旦用户将鼠标悬停在所选意见上，li 的类就会更改为dk_option_current，一旦用户单击选择，我就可以做一些事情 future 的事情，我真的不知道如何实现这一点，我可能正在使用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>