Jquery - 检查单选按钮，获取特定标签内容

Question

在过去的几天里，我花了好几个小时尝试几乎所有我能找到的 Stack Overflow sn-p 来自己破解它，但没有任何东西能按我需要的方式工作。在这个阶段，我希望你们中的一个人能帮助我。

目标：

我有一个显示在订单表单上的单选按钮列表。我只想从选中的单选输入中提取特定标签内容并将其保存到变量中，即“3 产品名称”或“1 产品名称”。

$("input:radio").click(function() {
  var label_description = this.parentElement.outerText;
  alert(label_description);
});

//Goal- Extract specific label content from checked radio input e.g "3 Product Name" or "1 Product Name"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="12374747">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">3 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">4 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">6 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">1 Product Name</label>
</div>

JS 小提琴：http://jsfiddle.net/1t1edf8v/5/

如您所见，我所拥有的只是提取完整标签内容和价格的工作代码。我明白为什么会发生这种情况，我只是无法隔离我需要的东西。

非常感谢您对此的任何帮助！

Answer 1

简单地说，使用 querySelector：

 alert(this.parentElement.querySelector("[data-cf-product-name]").outerText)

更新的小提琴： http://jsfiddle.net/1t1edf8v/3/

请注意，我在 querySelector 函数中使用 属性选择器，如果您愿意，可以使用其他选择器。

要提取字符串“3 产品名称”或任何其他字符串，您可以使用拆分函数或正则表达式。你只需要一些模式。

例如，

var text = this.parentElement.querySelector("[data-cf-product-name]").outerText;
var selected = (text.split("-"))[0].trim();
alert(selected);

更新的小提琴： http://jsfiddle.net/1t1edf8v/8/

Answer 2

试试这个 $(this).siblings('label').HTML()

但更好的方法是为您的 div 或标签分配一些 id，以便您以后区分它。

Answer 3

您发布的代码有两个问题；您的 HTML 重复了许多具有相同 id 的元素：这是无效的，因为 id 必须唯一标识文档中的一个元素（如果您想共享一个公共标识符，请使用类名或自定义data-* 属性）。共享id 属性的结果意味着<label> 元素在单击时只能选择具有该特定id 的第一个元素（一个<input> 元素与多个<label> 关联是完全有效的元素）。

将id 属性更改为唯一，并将<label> 元素的for 属性更改为将给定<label> 与正确的<input> 相关联，以下成为可能：

// using attribute-selection to identify the <input> elements
// whose 'type' attribute is equal to 'radio', and binding the
// anonymous function of the on() method as the event-handler
// for the 'change' event:
$('input[type=radio]').on('change', function() {

  // using the 'let' statement to create the variable
  // 'productName,' and finding the first <label> element
  // associated with the changed radio-element, retrieving
  // the textContent of that <label> and splitting that
  // text on the '-' character:
  let productName = this.labels[0].textContent.split('-');

  // if we have a truthy productName variable:
  if (productName) {
    // we retrieve the first part of the Array returned
    // by String.prototype.split(), trim that text to
    // remove leading and trailing white-space and then
    // log it to the console:
    console.log(productName[0].trim());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="12374747">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">3 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-02" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-02" data-cf-product-name="true">4 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-03" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-03" data-cf-product-name="true">6 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-04" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-04" data-cf-product-name="true">1 Product Name</label>
</div>

JS Fiddle demo.

当然，使用纯 JavaScript/DOM API，上面的也是完全可能的：

function retrieveLabelText() {

  // 'this' is passed from EventTarget.addEventListener(),
  // here we again retrieve the first <label> element
  // associated with the changed <input> element,
  // retrieve the textContent of that element and then
  // split the String into an Array using
  // String.prototype.split():
  let text = this.labels[0].textContent.split('-');

  // if we have a truthy 'text' value:
  if (text) {

    // we trim the first element of the Array of
    // Strings, and log that trimmed String to the
    // console:
    console.log(text[0].trim());
  }
}

// here we retrieve all elements in the document that match
// CSS selector, which searches for all <input> elements
// whose 'type' is equal to 'radio', the returned NodeList
// is passed to Array.from(), which converts the Array-like
// NodeList into an Array, with access to the Array methods:
let = radios = Array.from(document.querySelectorAll('input[type=radio]'));

// here we iterate over the Array of <input> elements using
// Array.prototype.forEach():
radios.forEach(

  // 'radio' is the current radio <input> element of the
  // Array of elements over which we're iterating,
  // here we use an Arrow function to add an event-listener
  // to the current <input> element, using the
  // EventTarget.addEventListener() method to bind the named
  // function ('retrieveLabelText') as the event-handler
  // for the 'change' event:
  radio => radio.addEventListener('change', retrieveLabelText)
);

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="12374747">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">3 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-02" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-02" data-cf-product-name="true">4 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-03" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-03" data-cf-product-name="true">6 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-04" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-04" data-cf-product-name="true">1 Product Name</label>
</div>

JS Fiddle demo.

参考资料：

• CSS：
  • Attribute selectors ([attribute=value])。
• JavaScript：
  • Array.from()。
  • Array.prototype.forEach()。
  • Arrow Functions。
  • EventTarget.addEventListener()。
  • HTMLInputElement。
  • let Statement。
  • Node.textContent。
  • String.prototype.split()。
  • String.prototype.trim()。
• jQuery:
  • on()。