Question

我试图获取所选标签的价值，当它更改获得所选标签的价值时，我有一个可配置的产品，当有人选择任一选项时，价格变化见下文：

价格的差异是+/-£2.40，具体取决于选择了什么选项，当有人更改数量时，我有动态价格计算选择了哪个选项的价格，但是我无法获得所选选项的值，因为它显示一个空白字段。

        <div class="input-box">
       <select name="super_attribute[183]" id="attribute183" class="required-entry super-attribute-select" style="left: -10000px; position: absolute;">
          <option value="">Choose an Option...</option>
          <option value="90" price="2.4">With Screws +£2.40</option>
          <option value="89" price="0">Without Screws</option>
       </select>
       <div class="switcher-field switcher-screws" id="attribute183_switchers">
           <label class="switcher-label" id="attribute183_90" value="90" title="With Scews" style="width:60px;height:60px;line-height:60px">
           <img src="image" alt="With Scews">
           </label>
           <label class="switcher-label selected" id="attribute183_89" value="89" title="Without Screws -£2.40" style="width:60px;height:60px;line-height:60px">
           <img src="image2" alt="Without Screws -£2.40">
           </label>
           <div style="clear:both"></div>
       </div>
    </div>

我正在使用当前的jQuery代码

var selectedOption = jQuery('.switcher-screws label.selected');
selectedOption.on('change', function(){
    var optionvalue = $(this).val()
})
console.log(optionvalue);

我试过

var selectedOption = jQuery('.switcher-screws label.selected');
optionvalue = selectedOption.val()
console.log(optionvalue);

但它只是给了我一个空白的价值，我对哪里出错了？

编辑：我设法通过点击

获取标签的价值

    jQuery('label.switcher-label').click( function(){

            var sellabel = jQuery('label.switcher-label.selected').attr('value');

            console.log(sellabel);
        });

Answer 1

.val（）方法主要用于获取表单元素的值例如input，select和textarea。当空的时候叫集合，它返回undefined。

它不会返回标签的值，您可以尝试使用attr函数：

var selectedOption = jQuery('.switcher-screws label.selected');
optionvalue = selectedOption.attr('value');

Answer 2

<label>没有属性value。这是无效的HTML 。也许这就是为什么这不能按预期工作的原因。尝试使用data-*属性来存储值：

<label
    class="switcher-label selected"
    id="attribute183_90"
    data-value="90"
    title="With Scews">
        <img src="imagewithoutscrews" alt="With Screws">
</label>

在JS中检索值：

var value = jQuery('.switcher-label.selected').data('value);

将onchange与<label>一起使用：请注意，onchange对标签没有任何影响，因为标签内容通常不会改变。这看起来像你尝试以某种奇怪的方式模拟表单输入。我想你应该描述你想做什么。

Answer 3

根据HTML 5标准和W3C规则，您无法额外编写标签中不属于该标签的属性。写额外的标签中的属性必须在标签中为值添加前缀'data-' 标记您需要写data-value="90"而不是value="90" 因为值对标签标签无效，所以它对输入字段有效。

对于此

<label class="switcher-label" id="attribute183_89" data-value="89" title="Without Screws -£2.40" style="width:60px;height:60px;line-height:60px">

在您的jQuery代码中，您可以使用data（）方法

获取该数据值

var optionvalue = jQuery('.switcher-screws label.selected').data('value');

为什么我无法获得标签的价值？

3 个答案: