循环上课。获取输入和跨度值答案

【问题标题】：Loop through class. Get input and span values循环上课。获取输入和跨度值
【发布时间】：2011-06-16 20:14:50
【问题描述】：

当我认为我正在击败 JQuery 时，我被难住了。

<div class="productAttributeValue">
<div class="productOptionViewRectangle">
<ul>
    <li class="option">
        <label for="dca37e79338c28f796c3bdd4e88492f2">
            <input
                type="radio"
                class="validation"
                name="attribute[52]"
                value="97"
                id="dca37e79338c28f796c3bdd4e88492f2"
                        />
            <span class="name">25 ML</span>
        </label>
    </li>

    <li class="option">
        <label for="b6cc5db62235218dade2cbe8dcdfdad4">
            <input
                type="radio"
                class="validation"
                name="attribute[52]"
                value="98"
                id="b6cc5db62235218dade2cbe8dcdfdad4"
                        />
            <span class="name">50 ML</span>
        </label>
    </li>

</ul>
</div>
</div>

我需要遍历 li 并获取输入的值并更改该 li 中 class="name" 的文本。例如，如果 value = 97，则该跨度的文本应为 50 ML（建议零售价 $69.00）。

我们使用他们认为合适的方式呈现页面的 3rd 方的东西。需要无法将其更改为我们需要的。

再次感谢您的帮助。欣赏它。

【问题讨论】：

标签： jquery loops input html-lists html

【解决方案1】：

你可以用这行代码简单地做到这一点：

$('.option input[value=97]').next('.name').text('50 ML (RRP $69.00)');

为了更容易添加更多选项，创建一个数组来做同样的事情：

var d = [
  {'value':'97','text':'50 ML (RRP $69.00)'},
  {'value':'[your value]','text':'[your text]'}
];

$(d).each(function() {
  $('.option input[value='+this.value+']').next('.name').text(this.text);
});

【讨论】：

漂亮的单线！如果他真的只需要一个开关，这是一种非常巧妙的方法，否则我认为其他两个答案可能更有效。
我实际上认为这段代码更高效，因为它不需要在each() 函数中放入switch 或if 语句，从而消除了麻烦。
我想乍一看确实有道理。我假设 OP 有某种等式，他将对这些值进行处理以获得名称。或者后端有一个巨大的值数据库（这种看起来像电子商务系统，可能是这样）......
我也在想同样的事情。在这里，我会让该代码生成上述数组（可能在服务器端），以便它采用简化形式并分离逻辑。
这是我用的那个。工作得很好！！感谢堆栈伙伴。

【解决方案2】：

只需使用$.each() 浏览它们，然后使用find() 查找您需要的元素：

$('.option').each(function(i){
    var t = $(this).find('.name');
    switch ($(this).find('input').val()){
        case "97":
            t.text(" 50 ML (RRP $69.00)");
            break;
                case "98":
            t.text(" text for 98...");
            break;
    } 
});

示例：http://jsfiddle.net/niklasvh/XnAp3/

【讨论】：

感谢您的快速回复，谢谢

【解决方案3】：

这应该很简单，使用 JQuery 的 each 函数。您的代码将如下所示：

$("li.option").each(function() {
    var val = $(this).children("input").val();

    //Put your logic here to decide what the span should say
    var name = "50 ML (RRP $69.00)";//Just putting this in for the example

    $(this).children("span.name").val(name);
});

这将遍历您的每个 li.options，获取其子 input 元素的值，然后将其子 span.name 元素设置为您想要的值。

【讨论】：

感谢您的快速回复。