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() {&nbsp; &nbsp;$(".dk_options_inner li").mouseover(function() {&nbsp; &nbsp; &nbsp; $(".dk_options_inner li").removeClass("dk_option_current");&nbsp; &nbsp; &nbsp; $(this).addClass("dk_option_current");&nbsp; &nbsp;});&nbsp; &nbsp;$(".dk_options_inner li").click(function() {&nbsp; &nbsp; &nbsp; $(".dk_options_inner li").removeClass("dk_option_current selected");&nbsp; &nbsp; &nbsp; $(this).addClass("dk_option_current selected");&nbsp; &nbsp; &nbsp; $(".dk_label").text($(this).text());&nbsp; &nbsp;});});.dk_option_current, .selected {&nbsp; 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>&nbsp; <div class="dk_options">&nbsp; &nbsp; <ul class="dk_options_inner">&nbsp; &nbsp; &nbsp; <li class="dk_option_current selected"><a data-dk-dropdown-value="1">TopHat 3D 20g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="2">TopHat 3D 70g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="4">TopHat 3D 100g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="6">Brass 3D 70g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="7">Brass 3D 100g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="9">Brass Bullet 70g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="10">Brass Bullet 100g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="12">Steel Field 70g</a></li>&nbsp; &nbsp; &nbsp; <li class=""><a data-dk-dropdown-value="13">Steel Field 100g</a></li>&nbsp; &nbsp; </ul>&nbsp; </div></div>