Question

我有一个选择列表，每个项目都包含属性。我想在活动列表项上返回属性值，并且收到错误“无法读取null的属性'value'”。

列表：

<div id="selections" class="available_selections">
  <ul>
   <li>
    <a id="variant_option" price="19.99" product_id="5004"  optionid="foo" class="" onclick="javascript:someFunctions(...);" onmouseout="javascript:moreFunctions(...);">
      Foo
      <input type="hidden" id="li_variant_foo" value="19.99">
    </a>
   </li>
   <li>
    <a id="variant_option" price="29.99" product_id="5004"  optionid="bar" class="active" onclick="javascript:someFunctions(...);" onmouseout="javascript:moreFunctions(...);">
      Bar
      <input type="hidden" id="li_variant_bar" value="29.99">
    </a>
   </li>
   <li>
    <a id="variant_option" price="39.99" product_id="5004"  optionid="baz" class="" onclick="javascript:someFunctions(...);" onmouseout="javascript:moreFunctions(...);">
      Baz
      <input type="hidden" id="li_variant_baz" value="39.99">
    </a>
   </li>
  </ul>
</div>

我想返回price，product_id，optionid和隐藏输入的id及其在活动项目中的值（我们的“选择” ）。

我已经尝试使用一个属性进行以下测试：

var test = $('#variant_option .active').attr('optionid');
var test2 = $('#variant_option :focus').attr('optionid');
var test3 = $('a .active').attr('optionid');
var test4 = $('a#variant_option .active').value;
var test5 = $('#variant_option').activeElement;

错误始终是：Cannot read property 'value' of null。

这是一条小而明显的蛇，它会杀死我-我敢肯定。哈哈哈哈。

Answer 1

您只能在整个页面上一次使用每个id值。

id是 identifier 的缩写，这意味着它必须唯一，否则您的HTML无效。

如果页面上有重复的id值，尝试选择它们只会总是找到第一个。

您的代码中还有更多错误：

不允许在input标记内包含<a>元素。
price，product_id，optionid在链接上无效。请使用data-前缀的属性。
您正试图选择链接并读取它的value-但是链接没有value属性。
如果要选择类.active的链接，则a和.active之间不能有空格-空格本身是一个选择器，称为后代选择器。

具有活动类的列表项的返回属性值

1 个答案: