javascript - 如何设置选定的 li 值以使用 jquery 输入

Question

我不知道如何使用 jquery 获取结果:

1. 点击li会添加选择的类并删除其他选择的li

2. 将选择的 li 数据值设置为 input(id:sizevalue)

3. 确保在单击提交按钮时应选择 li 列表

   <form name="form">
   <style>
       #sizelist ul{list-style-type:none;}
       #sizelist ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
       #sizelist ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
       #sizelist ul li a:hover{border:2px solid #FF6701;margin:0px;}
       #sizelist .select a{border:2px solid #FF6701;margin:0px;}
   </style>
   
   <ul id="sizelist">
       <li datavalue="S"><a href="javascript:void(0);">S</a></li>
       <li datavalue="M"><a href="javascript:void(0);">M</a></li>
       <li datavalue="L"><a href="javascript:void(0);">L</a></li>
       <li datavalue="XL"><a href="javascript:void(0);">XL</a></li>
   </ul>
   
   <input id="sizevalue" size="15" name="size" type="text" />
   <input type="button" value="submit"/>
   </form>
   

请帮忙

Answer 1

试试这个:

HTML

<ul id="sizelist">
  <li><a href="#" data-value="S">S</a></li>
  <li><a href="#" data-value="M">M</a></li>
  <li><a href="#" data-value="L">L</a></li>
  <li><a href="#" data-value="XL">XL</a></li>
</ul>

<input id="sizevalue" size="15" name="size" type="text" />

jQuery

$('#sizelist a').on('click', function(e) {
  e.preventDefault();

  // This removes the class on selected li's
  $("#sizelist li").removeClass("select");

  // adds 'select' class to the parent li of the clicked element
  // 'this' here refers to the clicked a element
  $(this).closest('li').addClass('select');

  // sets the input field's value to the data value of the clicked a element
  $('#sizevalue').val($(this).data('value'));
});

记下我所做的更改:

-- 将datavalue替换为data-value，以便能够使用jQuery的.data()方法

-- 将 data-value 属性转移到 a 元素，因为它们是实际被点击的元素

-- 替换了 href 中的 javascript:void(0)，因为它不执行任何操作