Question

在过去的几天里，我花了几个小时和几个小时尝试几乎每个Stack Overflow片段，我可以找到自己一起破解这个，但没有任何东西像我需要的那样工作。在这个阶段，我希望你们中的一个能够帮助我。

目标：

我有一个订单上显示的单选按钮列表。我想从已检查的无线电输入中提取特定标签内容，并将其保存到变量，即“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 函数中使用属性选择器，如果你想要，你可以使用其他选择器。

提取字符串＆＃34; 3产品名称＆＃34;或仅限任何其他字符串，您可以使用拆分功能或regEx 。你只需要一些模式。

例如，

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必须唯一地标识文档中的一个元素（如果你想共享一个公共标识符，可以使用一个类-name或自定义data-*属性）。共享id属性的结果意味着<label>元素在点击时只能选择具有该特定id的第一个元素（它对一个<input>元素完全有效与多个<label>元素相关联。）

将id属性更改为唯一，并将for元素的<label>属性更改为将给定<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()。

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

3 个答案: