Javascript:将标签的值传递给变量

Question

希望你能帮我找到解决这个问题的方法。我有一个包含许多 anchor 标记的页面，这些 anchor 标记包含一个具有唯一元素的 ID。以下是链接示例:

<a href="#" class="button" id="widget_1" 
   onclick="$(this).parent().submit(); return false;">Button</a>

<a href="#" class="button" id="widget_2" 
   onclick="$(this).parent().submit(); return false;">Button</a>

<a href="#" class="button" id="widget_3" 
   onclick="$(this).parent().submit(); return false;">Button</a>

下面是我尝试创建的用于收集“id”中的值的代码:

var num = [];
for (var i = 0; i<11; i++) {
  num[i] = document.getElementsByTagName("id")[i].textContent;
    if (num[i] == "widget_1"){ var y = "39.00"; return y;}
    else if (num[i] == "widget_2"){ var y = "59.00"; return y;}
    else if (num[i] == "widget_3"){ var y = "85.00"; return y;}
    else { var y = "0";}

 return y; }

我想做的是捕获 id 上的内容并使用它将它传递给数组，如果内容匹配，则返回“y”的值。例如，如果我单击第二个链接，则会返回 59.00。可以提供的任何帮助将不胜感激。 谢谢， 里德

Answer 1

另一种方法

此方法还允许您删除标记中的 onclick 事件并提高可读性，separating behavior from structure . (又名 Separation of Concerns)

// put your prices on an array;
var prices = [39.0, 59.0, 85.0];

// match all widget(s) (aka anchors), add click handler.
$("[id^=widget]").click(function(element) {
   // calculate the index into prices array based on anchor id.
   var index = parseInt(this.id.substring(7)) - 1;

   // get the pirce
   var price = prices[index];
    
   alert("Price is: " + price);

   // here you could call 
   // this.$parent.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button" id="widget_1">Button</a>
<a href="#" class="button" id="widget_2">Button</a>
<a href="#" class="button" id="widget_3">Button</a>

纯Javascript

这个版本没有 jQuert。享受吧!

注意:old browsers (IE < 8 && FF3.0) 有一些限制

// put your prices on an array;
var prices = [39.0, 59.0, 85.0];

var elements = document.querySelectorAll('[id^=widget]');

Array.prototype.forEach.call(elements, function(element) {
  
  var index = parseInt(element.id.substring(7)) - 1;
  var price = prices[index];
  element.onclick = function(event) {
       alert(price);
  };
  
});

<a href="#" class="button" id="widget_1">Button</a>
<a href="#" class="button" id="widget_2">Button</a>
<a href="#" class="button" id="widget_3">Button</a>

只提取数字

var r = /\d+/;
var s = "add_to_cart_sku_ThisItemA1_CEB";
var index = s.match(r);
alert (index);

提取子字符串(例如“ItemA1”)

var code = "add_to_cart_sku_ThisItemA1_CEB";
var strIndex = code.substring(code.indexOf("Item"), code.lastIndexOf('_'));
alert (strIndex);