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>