使用 jQuery 单击输入单选按钮时更改 span 的文本值

Change span's text value when an input radio is clicked using jQuery

本文关键字：span 文本 jQuery 单击 输入 单选按钮 使用      更新时间：2023-09-26

我想要文本'Rate！（62）"中的"费率"类更改为"费率！（63）' 当用户单击其中一个输入无线电时。

困难在于我有很多"星号"div，因此此更改必须仅发生在封闭的"星星"div的下一个跨度后代。

   <div class="stars float-left">
    <div class="rating" style="width:99%"></div>
    <p><input type="radio" name="rating" id="star5" value="5"><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label><input type="radio" name="rating" id="star3" value="3"><label for="star3"></label><input type="radio" name="rating" id="star2" value="2"><label for="star2"></label><input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
    </p>
    <span class="rate">Rate! (62)</span>
</div>

我是jQuery的新手，这是我到目前为止想出的，但它不起作用。 我想我在路上混淆了几件事：

('.rating input:radio').click(function() {
    var str_rate = $(obj).closest('span').next().find('.rate');
    //TODO: parse the current value and add 1 to it
    $(str_rate).html(str);
}

我完全缺少什么吗？

更新：这个jsfiddle显示了到目前为止考虑答案的进度，但它仍然无法正常工作。

您的问题是您的选择器查找span，将其更改为：

$(obj).parents('.stars').find('.rate');

所以我们得到父stars元素，然后我们得到关联的.rate span .

另外：您缺少从click函数开始的$。 并从它的末尾);。

您可以按如下方式更改费率：

    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! " + rate);

但请注意，我的选择器有问题，不得不修改它以获得跨度区域。

汤姆以下是我所做的所有代码更改：

<div class="stars float-left">
<div class="rating" style="width:99%"></div>
<p>
    <input type="radio" name="rating" id="star5" value="5"><label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4"><label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3"><label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2"><label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
</p>
<span class="rate">Rate! (62)</span>

使用以下脚本

    $('input:radio').click(function (obj) {
    var str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
});

我不认为我改变了 html，除了格式化。

如果你的选择器是正确的（str_rate），那么你可以通过var value = str_rate.val（） （见 http://api.jquery.com/val/）来获取值。然后，您可以再次通过 .val（） 方法更新该值并将其重新设置为元素，只是这次传入新值，或者像您已经在使用的那样通过 .html（）。

相关文章：